如何在页面中更改data-id后在jQuery中选择data-id？

Question

http://jsfiddle.net/V76T7/

 $('.click').click(function() {
  id = $(this).data('id');
  alert(id);
  $('.click').attr('data-id' , id+1);
 });

如链接所示，我希望每次单击按钮时data-id都会增加1。当你点击它时，data-id确实增加到2，你可以在Chrome中使用'Inspect Element'看到它。但是当我点击它时，弹出窗口仍然是1，但不是预期的“2”。为什么？

Answer 1

由于您使用.data获取该值，因此会将其导入jQuery.cache，因此将来的.data()次提取将来自该属性。

因此，如果您希望下一个“获取”获取更新后的值，则需要使用.data()进行更新。

$('.click').click(function() {
    id = $(this).data('id');
    alert(id);
    $('.click').data('id' , id+1);
});

---

或者更好的是，只需使用.attr()，因为它更快，并且内存开销更少（因为jQuery.cache中的值不重复）。

$('.click').click(function() {
    id = $(this).attr('data-id');
    alert(id);
    $('.click').attr('data-id' , id+1);
});

---

如果您需要保留原始文件，或者您正在处理从JSON值创建的更复杂的对象，我建议仅使用.data()。

Answer 2

1. 尝试使用相同的方法获取和设置数据属性（.attr或.data）
2. 将var放在id前面，避免使用隐式声明的全局变量。

所以你的代码应该是这样的：

$('.click').click(function() {
     var id = $(this).data('id');
     alert(id);
     $(this).data('id', id+1);
});

Demonstration