浏览器未观察到 data-* 的变化，CSS 属性选择器属性未呈现

Question

鉴于此 CSS：

[data-myplugin-object="blue-window"]{
    background-color: #00f;
}

[data-myplugin-object="red-window"]{
    background-color: #f00;
}

还有这个 jQuery：

$('[data-myplugin-object="blue-window"]').each(function(event){
    $(this).data({
        'myplugin-object': 'red-window'
    });
});

还有这个 HTML sn-p:

<div data-myplugin-object="blue-window">
    <p>Hello world</p>
</div>

现在，人们会期望当 jQuery sn-p 被执行时（当然会适当推迟到页面加载完成）我的蓝色窗口（最初呈现为蓝色 em>) 会变成红色。

不，当然不是；并分别在 Firefox 和 Chrome 中使用 Firebug 和 Developer Tools，我无法观察到 data-* 属性的任何变化。

为了让浏览器（和 DOM 工具箱）能够观察到变化，我需要恢复到 .attr() 还是有解决方法？

Answer 1

jQuery.data() 属性实际上并没有存储在 jQuery 中的 DOM 对象上。 DOM 对象使用唯一的 jQuery ID 进行标记，实际数据存储在单独的 javascript 数据结构中。除其他原因外，jQuery 这样做是为了防止循环引用内存泄漏错误，当数据值是对其他 DOM 对象的引用时，这些错误可能在某些浏览器中发生。

如果您想更改实际的 DOM 属性，我建议您自己直接设置属性，如下所示：

obj.attr("data-myplugin-object", "red-window");

不过，对于您正在做的事情，我认为大多数人会使用添加/删除/更改 CSS 类名称，而不是自定义属性，因为这是更改应用于对象的 CSS 规则的常用方法。

<div id="myObj" class="blueWindow">
    <p>Hello world</p>
</div>

.blueWindow {background-color: #00F;}
.redWindow  {background-color: #F00;}

 $("#myObj").removeClass("blueWindow").addClass("redWindow");

或者如果对象上没有其他类：

 $("#myObj").attr("class", "redWindow");