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);
    }
}

Answer 1

每个jQuery API文档

.data（）方法允许我们以一种不受循环引用和内存泄漏安全的方式将任何类型的数据附加到DOM元素。

.data()方法不会修改现有的DOM节点，但只能通过调用$selector.data()来检索。您的DOM元素不会发生变化，只会更改附加到它们的数据。

Answer 2

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

为了向DOM元素添加属性，您可能希望使用.attr() method。使用.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 example

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

Answer 3

您可以这样做：

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

而不是返回.html（），它返回元素的内部内容。

jQuery，data（）不更新数据属性

3 个答案: