jquery - 浏览器未观察到 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 片段:

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

现在，人们会期望当 jQuery 片段被执行时(当然会适本地推迟到页面加载完成)我的蓝色窗口(最初呈现为蓝色 ) 会变成红色。

不，当然不是；并分别在 Firefox 和 Chrome 中使用 Firebug 和开发者工具，我无法观察到 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");