jquery – 浏览器没有观察到data- *的变化,CSS属性选择器属性没有渲染

鉴于此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片段：

现在,人们会期望当jQuery片段被执行时(正确延迟到页面加载完成为止)我的蓝色窗口(最初呈现为蓝色)将变为红色.

不,它肯定没有;并且分别在Firefox和Chrome中使用Firebug和开发者工具,我无法观察到data- *属性的任何变化.

为了使浏览器(以及DOM工具箱)能够观察到变化,我是否需要恢复为.attr()或者是否有解决方法？

最佳答案

jQuery.data()属性实际上并不存储在jQuery中的DOM对象上. DOM对象用唯一的jQuery ID标记,实际数据存储在单独的javascript数据结构中.除了其他原因之外,jQuery还采用这种方式来防止在数据值引用其他DOM对象时在某些浏览器中可能发生的循环引用内存泄漏错误.

如果你想改变实际的DOM属性,我建议你自己直接设置属性,如下所示：

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

虽然,对于你正在做的事情,我认为大多数人会使用添加/删除/更改CSS类名,而不是自定义属性,因为这是更改哪些CSS规则应用于对象的常用方法.

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

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