jQuery使用attr修改data属性后调用data()未返回最新值问题

• 点击第一个绿色按钮
• 点击查询价格按钮，返回值正常
• 点击第二个绿色按钮后再次点击查询价格，返回值错误

问题根源是jQuery data()方法与attr()方法的存储逻辑不互通：

1. jQuery的data()方法首次读取data-*属性时，会将属性值缓存到jQuery内部的存储对象中，后续所有data()读取操作都优先读取缓存值，不会再同步DOM元素上的data-*属性更新
2. 示例代码中使用attr('data-price', txt)修改的是DOM元素的原生属性，没有同步更新jQuery的内部缓存，因此第一次点击绿色按钮后缓存的价格值一直不会被更新，后续调用data('price')永远返回第一次读取到的值，就出现了返回值错误的问题。

有两种可行的修复方案，任选其一即可：

方案1：读写都使用data()方法，统一走jQuery缓存逻辑 #

修改设置价格的代码：

$('button.setprice').click(function() {
  var txt = $(this).text();
  $('.price').text(txt).data('price', txt);
});

方案2：读写都使用attr()方法，统一操作DOM原生属性 #

修改查询价格的代码：

$('.check').on('click',function(){
  alert($('.price').attr('data-price'))
});

内容的提问来源于stack exchange，提问作者Jack The Baker