Question

我无法相信这里找不到容易找到的答案，官方documentation只会让我感到困惑。

我有div个data-属性，让我们说data-color，我想在用户点击按钮时更改它。

我想我会这样做：

$('.button').click(function(){
    $('.div-with-data').data('color', 'red')
})

但它不起作用。是否可以实际写入这样的data-或者只读它？

Answer 1

您的代码运行正常 - 它只是不更新DOM。 jQuery将data属性存储在内部缓存对象中以获得更好的性能。您应该始终使用data()来获取和设置这些属性，除非您在DOM中有特定的原因需要它。

alert($('.div-with-data').data('color')); // = green

$('.button').click(function(){
  $('.div-with-data').data('color', 'red');
  alert($('.div-with-data').data('color')); // it's now red
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-with-data" data-color="green">
    Foo
</div>

<button class="button">Click me</button>

Answer 2

使用attr()：

$('.button').click(function(){
    $('.div-with-data').attr('data-color', 'red')
})

是否可以使用jQuery写入HTML data- *？

2 个答案: