浏览器没有观察到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");