jQuery，data()未更新数据属性

Question

我有下面这段HTML和相关的jQuery代码。 html函数正常工作，但data函数根本没有影响HTML，我怎么也无法弄清楚，浏览器中没有任何错误。

HTML

<span id="usernameStatus" data-valid="0">x</span>

jQuery

当一个 AJAX 调用返回 data 时，它只能是 true 或者 false。

function validUsername(data)
{        
    if (data === 'true') {
        $("#usernameStatus").html("y").data("valid", 1);
    } else {
        $("#usernameStatus").html("x").data("valid", 0);
    }
}

- llanato

---

可能是重复问题。 - Washington Guedes

我相信数据函数并没有按照你的期望工作。我很确定jQuery会复制/引用数据属性，所以你改变的是它而不是属性本身。如果你在更改后查看相同元素的.data，你会发现它已经改变了，但HTML属性仍然保持不变。 - Spaceman

你可以在这里找到一个很好的解释：https://dev59.com/HJbfa4cB1Zd3GeqPpSM- - The Process

Answer 1

根据jQuery API文档

.data() 方法可以让我们以一种安全的方式将任何类型的数据附加到DOM元素上，避免循环引用和内存泄漏。

.data() 方法 不会 修改现有的DOM节点，只能通过调用$selector.data() 进行检索。您的DOM元素不会改变，只是附加到它们上面的数据。

- Himmel

Answer 2

.data() 方法不会修改 DOM 元素的属性。但是，数据仍然可以通过 $selector.data(key, value); 保存，并且可以通过 $selector.data(key); 检索。

如果要向 DOM 元素添加属性，则可能需要使用 .attr() 方法。使用 .attr()，可以通过 $selector.attr(key, value); 将属性附加到元素上，并可以通过 $selector.attr(key); 检索。

    validUsername(data) {       
        if (data === 'true') {
            $("#usernameStatus").html("y").attr("data-valid", 1);
        } else {
            $("#usernameStatus").html("x").attr("data-valid", 0);
        }
    }

JSFiddle示例

使用.attr()而不是.data()的优点之一是能够通过$('[key="value"]')选择器查找具有属性（和值）的所有元素。

- Grant Mooney

Answer 3

你可以像这样做：

你可以这样做：

$("#usernameStatus").attr('data-valid','1'); 

使用 .html() 方法返回元素的内部内容，而不是使用 ising。

- harunur rashid