jQuery中替换变量后仍使用旧值的问题排查

问题出在jQuery的.data()方法的缓存机制上：第一次调用.data('buy')时，jQuery会把DOM上data-buy的初始值（50000）存入内存缓存；之后你用.attr()修改了DOM上的data-buy/data-sell属性，但.data()再读取时仍会取缓存里的旧值，不会重新读取DOM属性，所以切换时显示的还是初始值。

另外你最后尝试的代码里，把按钮选择器写成了.change（类选择器），但按钮的id是change，应该用#change才能正确触发事件。

解决办法1：用.data()更新数据（推荐） #

修改#change的点击事件，直接用.data()设置buy和sell的值，这样会同步更新jQuery的内部缓存，后续切换时读取的就是最新值：

$(document).on("click", "#change", function(){
    $(".myVar").data("buy", 6000);
    $(".myVar").data("sell", 9000);
});

toggle逻辑无需修改，继续用.data()读取即可。

解决办法2：直接读取DOM属性 #

如果需要保留DOM上data-*属性的可见更新，那么在toggle切换时，不要用.data()，改用.attr()直接读取DOM上的属性值：

$("#toggle").toggle(
    function(){
        $(".myVar").val($(".myVar").attr("data-buy"));
    },
    function(){ 
        $(".myVar").val($(".myVar").attr("data-sell"));
    }
);

这种方式每次都会从DOM读取最新的属性值，不受缓存影响。

内容的提问来源于stack exchange，提问作者joe