javascript - 更改 html 数据属性值

Question

$(document).ready( function () {

  $("#bla").on( "click", function () {
  
        alert( $(this).data('bla') );
  	    $(this).attr('data-bla', "2");  
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="bla" data-bla="1">
  button
</div>

因此，我需要将 data-bla 的值从“1”更改为“2”，但如您所见，值未更新，每次单击按钮时都会提醒默认值“1”。

我做错了什么？

Answer 1

data() 不是 data-* 属性的访问器函数。它是元素的 jQuery 数据缓存的访问器，它仅从 data-* 属性初始化。

如果你想读取data-bla属性的值，使用attr("data-bla")，而不是data("bla")。如果要设置bla数据项，使用data("bla", newValue)，而不是attr("data-bla", newValue).

例如，对 get 和 set 使用 attr()，或者对 get 和 set 使用 data()，但是不要不要混用它们，因为它们管理不同的事情。

使用 attr():

$(document).ready( function () {

  $("#bla").on( "click", function () {
  
        alert( $(this).attr('data-bla') );
  	    $(this).attr('data-bla', "2");  
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="bla" data-bla="1">
  button
</div>

使用data():

$(document).ready( function () {

  $("#bla").on( "click", function () {
  
        alert( $(this).data('bla') );
  	    $(this).data('bla', "2");  
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="bla" data-bla="1">
  button
</div>