ฉันมี div data-myval = "10"ที่มีคุณลักษณะต์ ฉันต้องการอัปเดตค่าของมัน มันจะไม่เปลี่ยนถ้าฉันใช้div.data('myval',20)? ฉันจำเป็นต้องใช้div.attr('data-myval','20')เท่านั้นหรือไม่

ฉันสับสนระหว่าง HTML5 และ jQuery หรือไม่ กรุณาแนะนำ ขอบคุณ!

แก้ไข: อัปเดตdiv.data('myval')=20เป็นdiv.data('myval',20)แต่ยังไม่มีการอัปเดต HTML

HTML

<div id="mydiv" data-myval="10"></div>

JS

var a = $('#mydiv').data('myval'); //getter

$('#mydiv').data('myval',20); //setter

การสาธิต

การอ้างอิง

จากการอ้างอิง:

jQuery ใช้.data()วิธีการบันทึกข้อมูลภายใต้ชื่อ 'events' และ 'handle' และยังสงวนชื่อข้อมูลใด ๆ ที่เริ่มต้นด้วยเครื่องหมายขีดล่าง ('_') สำหรับการใช้ภายใน

ควรสังเกตว่า jQuery data()ไม่เปลี่ยนdataคุณลักษณะใน HTML

ดังนั้นหากคุณต้องการเปลี่ยนdataแอตทริบิวต์ใน HTML คุณควรใช้.attr()แทน

HTML

<div id="outer">
    <div id="mydiv" data-myval="10"></div>
</div>

JS:

alert($('#outer').html());   // alerts <div id="mydiv" data-myval="10"> </div>
var a = $('#mydiv').data('myval'); //getter
$('#mydiv').attr("data-myval","20"); //setter
alert($('#outer').html());   //alerts <div id="mydiv" data-myval="20"> </div>

ดูการสาธิตนี้

คุณสามารถใช้attrสิ่งต่อไปนี้

HTML

<div id="mydiv" data-myval="JohnCena"></div>

ต้นฉบับ

 $('#mydiv').attr('data-myval', 'Undertaker'); // sets 
 $('#mydiv').attr('data-myval'); // gets

หรือ

$('#mydiv').data('myval'); // gets value
$('#mydiv').data('myval','John Cena'); // sets value

โปรดทราบว่า jQuery .data()ไม่ได้รับการอัพเดตเมื่อคุณเปลี่ยนdata-แอตทริบิวต์html5 ด้วย javascript

หากคุณใช้ jQuery .data()เพื่อตั้งค่าdata-คุณสมบัติในองค์ประกอบ HTML คุณควรใช้ jQuery .data()เพื่ออ่าน มิฉะนั้นอาจมีความไม่สอดคล้องกันหากคุณอัปเดตแอตทริบิวต์แบบไดนามิก ตัวอย่างเช่นดูsetAttribute(), dataset(), attr()ด้านล่าง เปลี่ยนค่ากดปุ่มหลาย ๆ ครั้งและดูคอนโซล

$("#button").on("click", function() {
  var field = document.querySelector("#textfield")

  switch ($("#method").val()) {
    case "setAttribute":
      field.setAttribute("data-customval", field.value)
      break;
    case "dataset":
      field.dataset.customval = field.value
      break;
    case "jQuerydata":
      $(field).data("customval", field.value)
      break;
    case "jQueryattr":
      $(field).attr("data-customval", field.value)
      break;
  }

  objValues = {}
  objValues['$(field).data("customval")'] = $(field).data("customval")
  objValues['$(field).attr("data-customval")'] = $(field).attr("data-customval")
  objValues['field.getAttribute("data-customval")'] = field.getAttribute("data-customval")
  objValues['field.dataset.customval'] = field.dataset.customval

  console.table([objValues])
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Example</h1>
<form>
  <input id="textfield" type="text" data-customval="initial">
  <br/>
  <input type="button" value="Set and show in console.table (F12)" id="button">
  <br/>
  <select id="method">
    <option value="setAttribute">setAttribute</option>
    <option value="dataset">dataset</option>
    <option value="jQuerydata">jQuery data</option>
    <option value="jQueryattr">jQuery attr</option>
  </select>
  <div id="results"></div>
</form>

โซลูชัน Javascript ของวานิลลา

HTML

<div id="mydiv" data-myval="10"></div>

JavaScript:

• ใช้getAttribute()คุณสมบัติของ DOM

   var brand = mydiv.getAttribute("data-myval")//returns "10"
   mydiv.setAttribute("data-myval", "20")      //changes "data-myval" to "20"
   mydiv.removeAttribute("data-myval")         //removes "data-myval" attribute entirely
  

• การใช้datasetคุณสมบัติของ JavaScript

  var myval = mydiv.dataset.myval     //returns "10"
  mydiv.dataset.myval = '20'          //changes "data-myval" to "20"
  mydiv.dataset.myval = null          //removes "data-myval" attribute
  

หากคุณใช้ jQuery ให้ใช้.data():

div.data('myval', 20);

คุณสามารถจัดเก็บข้อมูลโดยพลการ.data()แต่คุณ จำกัด .attr()เพียงแค่สายเมื่อใช้

[jQuery] .data () vs .attr () vs .extend ()

วิธีการ jQuery .data()อัปเดตวัตถุภายในที่จัดการโดย jQuery ผ่านการใช้วิธีนี้หากฉันถูกต้อง

หากคุณต้องการอัปเดตสเปรดของคุณdata-attributesให้ใช้ -

$('body').attr({ 'data-test': 'text' });

- มิฉะนั้น$('body').attr('data-test', 'text');จะทำงานได้ดี

อีกวิธีที่คุณสามารถทำได้คือใช้

$.extend( $('body')[0].dataset, { datum: true } );

- ซึ่ง จำกัด การเปลี่ยนแปลงใด ๆ ที่จะแอตทริบิวต์HTMLElement.prototype.dataset, ไม่เพิ่มเติมใด ๆHTMLElement.prototype.attributes

อีกวิธีในการตั้งค่า data- คือการใช้คุณสมบัติชุดข้อมูล

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>

const el = document.querySelector('#user');

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

// set the data attribute
el.dataset.dateOfBirth = '1960-10-03'; 
// Result: el.dataset.dateOfBirth === 1960-10-03

delete el.dataset.dateOfBirth;
// Result: el.dataset.dateOfBirth === undefined

// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// Result: 'someDataAttr' in el.dataset === true

เพื่อให้ jQuery และ DOM อยู่ในสถานะซิงค์ตัวเลือกง่ายๆอาจเป็น

$('#mydiv').data('myval',20).attr('data-myval',20);