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

Question

我在文档准备就绪时通过jQuery在多个div上设置了data-position属性。这个设置肯定起作用了。例如，在Chrome控制台中调用下面的代码将返回'left'。

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

然而，在CSS中，下面的内容没有任何作用。

[data-position='left']

在div中硬编码data-position="left"是可以工作的。我做错了什么？谢谢帮助。

- birnbaum

---

使用 data 实际上不会将数据属性添加到标记中，因此它不会影响 CSS。你应该添加一个类(class)。 - Reinstate Monica Cellio

$('.card-container').attr('data-position',"设置你的值"); - Rituraj ratan

Answer 1

如果您像这样设置data属性，则表示它存储在jQuery的缓存中（即内存中的对象），它不会被设置为元素上的属性，因此没有CSS选择器会看到它。

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

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

需要注意的是，尽管我们只是谈论毫秒级别的时间，但检索数据值时性能会稍微降低。

- Rory McCrossan

Answer 2

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

参考 attr

- Rituraj ratan

Answer 3

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

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

- James Donnelly

---

这不会更改“data-position”属性，而是添加了另一个名为“position”的属性。 - adrenalin

@adrenalin，你说得很好！今天我显然太累了，无法准确回答问题... - James Donnelly