更改数据属性不起作用 [英] changing data attribute isn't working

问题描述

我正在尝试更改数据属性，但它似乎从未更改过，而是保留为"TEXT"，这是默认设置.

function SuccessGetActorsForGroupCallback(data, el) {
    var str = "";
    jQuery.each(data, function (i, val) {
        str += val + '<br />';
    });

    $(el).data('original-title', str);
    Utilities.ApplyTooltips($(el));
}

请帮助

解决方案

.data 方法不会更改data- HTML属性；它会更改jQuery内部存储的变量.

如果您确实需要/想要更改data-属性，请使用.attr()方法显式地执行此操作:

$(el).attr('data-original-title', str); 

但是， 不会更改.data返回的值. jQuery仅在找不到内部存储的值的情况下才会从data- HTML属性获取该值.如果在更改HTML属性后再次检索$(el).data('original-title')，您会发现它没有改变.

如果这是一个问题，请使用 .removeData() 方法在内部删除-储值.下次使用.data()时，jQuery将发现它丢失了，并检索了data- HTML属性.

看看: http://jsfiddle.net/mblase75/LHCUK/

---

HTML:

<p id="p" data-title="blah"></p>

jQuery:

console.log($('#p').data('title')); // returns "blah"

// alter the attribute directly
$('#p').attr('data-title','whooo'); // data-title="whooo"
// test if .data is changed
console.log($('#p').data('title')); // still returns "blah"

// delete the .data() value
$('#p').removeData('title');
// now fetch it again -- it will retrieve the new data- attribute
console.log($('#p').data('title')); // returns "whooo"

---

现在，在实践中，您不必为此担心.只需记住，data-属性表示.data()变量的 initial 值，而不一定是该变量的 current 值，您会没事的. /p>

总结: .data()方法在加载文档时从HTML元素 一次 中检索一个值，并且不会执行该操作因此只要该变量存储在内部，就可以再次使用.

I am trying to change a data attribute, but it never seems to get changed and remains as "TEXT", which is the default.

function SuccessGetActorsForGroupCallback(data, el) {
    var str = "";
    jQuery.each(data, function (i, val) {
        str += val + '<br />';
    });

    $(el).data('original-title', str);
    Utilities.ApplyTooltips($(el));
}

Please help

解决方案

The .data method doesn't alter the data- HTML attribute; it alters a variable that jQuery stores internally.

If you really need/want to alter the data- attribute, do so explicitly with the .attr() method:

$(el).attr('data-original-title', str); 

However, this won't alter the value returned by .data. jQuery will fetch that value from the data- HTML attribute only if it can't find the value stored internally. If you retrieve $(el).data('original-title') again after altering the HTML attribute, you'll find it hasn't changed.

If this is a a problem, use the .removeData() method to delete the internally-stored value. The next time you use .data(), jQuery will see that it's missing and retrieve the data- HTML attribute.

Take a look: http://jsfiddle.net/mblase75/LHCUK/

---

HTML:

<p id="p" data-title="blah"></p>

jQuery:

console.log($('#p').data('title')); // returns "blah"

// alter the attribute directly
$('#p').attr('data-title','whooo'); // data-title="whooo"
// test if .data is changed
console.log($('#p').data('title')); // still returns "blah"

// delete the .data() value
$('#p').removeData('title');
// now fetch it again -- it will retrieve the new data- attribute
console.log($('#p').data('title')); // returns "whooo"

---

Now, in practice, you shouldn't have to worry about this. Just remember that the data- attribute represents the initial value of a .data() variable and not necessarily the current value of that variable, and you'll be fine.

In summary: The .data() method retrieves a value from the HTML element once when the document is loaded, and will not do so again as long as the variable is stored internally.

这篇关于更改数据属性不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！