javascript - 数据值在 DOM 中更新，但在函数中不更新

Question

我根据用户的选择更改按钮的文本。

$(".someClass").click(function() {
    $("#someID_1").text($(this).prop("innerHTML"));
    $("#someID_1").attr("data-value", $(this).data("value"));

    someFunction("someID_1");
});

然后我想调用一个函数someFunction。

function someFunction(someID) {
    console.log(parseInt($("#" + someID).data("value")))
    if ( parseInt($("#" + someID).data("value")) !== 10 ) {
        // do something
    } else {
        // do something else
    }
}

发生的情况是，console.log 在第一次函数调用(因此，第一次单击)时绘制了所选内容的data-value。但是，当我选择新内容并再次执行该函数时，通过 console.log 绘制的数据值保持不变。查看 DOM，data-value 会更新。

这是为什么？

Answer 1

由于.data()使用内部缓存，因此它仅使用数据属性作为默认值，并且更新属性不会影响它，

您需要使用.data(key, value)来设置值。如果您需要更新 DOM，请使用 .attr()

$("#someID_1").data("value", $(this).data("value"));

<小时/>

如果你使用attr()来获取和设置，你将得到更新后的值。您不应该使用的是attr()和data()的组合。如果您没有真正的理由更新属性，请使用 data() 来获取和设置值。