頁面中的data-id更改后，如何在jQuery中選擇data-id？

Question

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

如鏈接中所示，我希望每次單擊按鈕時data-id都增加1。 當您單擊它時，data-id確實確實增加到了2，並且可以在Chrome中使用“檢查元素”看到它。但是，當我下次單擊它時，彈出窗口仍然是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()時才使用.data() 。

Answer 2

因此，您的代碼應如下所示：

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