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>

因此，我需要将“{1}”值从“1”更改为“2”，但正如您所看到的，值未更新且每次单击按钮都会提醒默认值“1”。

我做错了什么？

Answer 1

data() 不是data-*属性的访问者函数。它是jQuery数据缓存的访问者，该数据缓存仅来自data-*属性的初始化。

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

例如，使用attr()同时获取和设置，或使用data()同时获取和设置，但不要混用它们，因为它们管理不同的东西。

使用attr()：

＆＃13;

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

＆＃13;

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

＆＃13;

使用data()：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

attr()方法只更新元素中可见的属性。要以正确的方式存储数据，您需要使用data()方法，并将第二个参数作为值。

$ docker run -it --cpu-period=50000 --cpu-quota=25000 ubuntu:14.04 /bin/bash

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

参考：jQuery Data vs Attr?

Answer 3

如果你检查.data（＆＃39; bla＆＃39;），你也应该更改那个; - ）

＆＃13;

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

＆＃13;

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

＆＃13;

更改html数据属性值

3 个答案: