鉴于此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");
