Tôi có một div với một thuộc tính data-myval = "10". Tôi muốn cập nhật giá trị của nó; Nó sẽ không thay đổi nếu tôi sử dụng div.data('myval',20)? Tôi chỉ cần sử dụng div.attr('data-myval','20')?

Tôi có bị nhầm lẫn giữa HTML5 và jQuery không? Xin tư vấn. Cảm ơn!

EDIT: Cập nhật div.data('myval')=20đến div.data('myval',20), nhưng vẫn không hỗ trợ HTML cập nhật.

HTML

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

Mã não

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

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

Bản giới thiệu

Tài liệu tham khảo

Từ tài liệu tham khảo:

Bản thân jQuery sử dụng .data()phương thức để lưu thông tin dưới tên 'sự kiện' và 'xử lý' và cũng bảo lưu bất kỳ tên dữ liệu nào bắt đầu bằng dấu gạch dưới ('_') để sử dụng nội bộ.

Cần lưu ý rằng jQuery data()không thay đổi datathuộc tính trong HTML.

Vì vậy, nếu bạn cần thay đổi datathuộc tính trong HTML, bạn nên sử dụng .attr()thay thế.

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>

Xem bản demo này

Bạn cũng có thể sử dụng những attrđiều sau đây ;

HTML

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

Kịch bản

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

HOẶC LÀ

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

Xin lưu ý rằng jQuery .data()không được cập nhật khi bạn thay đổi data-các thuộc tính html5 bằng javascript.

Nếu bạn sử dụng jQuery .data()để đặt data-các thuộc tính trong các phần tử HTML, tốt hơn bạn nên sử dụng jQuery .data()để đọc chúng. Nếu không, có thể có sự không nhất quán nếu bạn cập nhật các thuộc tính một cách linh hoạt. Ví dụ, xem setAttribute(), dataset(), attr()bên dưới. Thay đổi giá trị, nhấn nút nhiều lần và xem bảng điều khiển.

$("#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>

Giải pháp Vanilla Javascript

HTML

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

JavaScript:

• Sử dụng getAttribute()tài sản của 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

• Sử dụng thuộc datasettính của 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

Nếu bạn đang sử dụng jQuery, hãy sử dụng .data():

div.data('myval', 20);

Bạn có thể lưu trữ dữ liệu tùy ý .data(), nhưng bạn bị hạn chế chỉ chuỗi khi sử dụng .attr().

[jQuery] .data () so với .attr () so với .extend ()

Phương thức jQuery .data()cập nhật một đối tượng nội bộ được quản lý bởi jQuery thông qua việc sử dụng phương thức, nếu tôi đúng.

Nếu bạn muốn cập nhật thông tin của mình data-attributes, hãy sử dụng -

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

- nếu không, $('body').attr('data-test', 'text');sẽ hoạt động tốt.

Một cách khác bạn có thể thực hiện điều này là sử dụng -

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

- trong đó hạn chế bất kỳ thay đổi thuộc tính nào HTMLElement.prototype.dataset, không bổ sungHTMLElement.prototype.attributes .

Một cách khác để đặt thuộc tính data- là sử dụng thuộc tính tập dữ liệu .

<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

Để giữ cho jQuery và DOM đồng bộ hóa, một tùy chọn đơn giản có thể là

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