CSS 不响应通过 jQuery 设置的数据属性

Question

我正在通过jQuery在几个div上设置一个data-position属性。设置绝对有效。例如，在 Chrome 控制台中调用以下代码将返回 'left' 。

$('.card-container').data('position');

但是在CSS中，下面的内容没有做任何事情。

[data-position='left']

不过，div 中的硬编码data-position="left"正在工作。我做错了什么？感谢您的帮助

Answer 1

按原样设置data属性意味着它存储在jQuery的缓存中（这是内存中的一个对象），它不会被设置为元素的属性，因此没有CSS选择器会看到它。

您需要使用 attr 手动设置 data 属性才能正常工作：

$('.card-container').attr('data-position', 'left');

但请注意，在检索数据值时，这将略微降低性能，尽管我们谈论的是毫秒级。

Answer 2

$('.card-container').attr('data-position',"set your value");

参考资料

Answer 3

jQuery的data()方法实际上并没有改变属性。为了更改元素本身的属性，您必须使用 attr() ：

$('.card-container').attr('data-position', 'value');