Question

由于某些原因我无法弄清楚，$('element').data('data_attribute_name', 'value');语法在这里不起作用：

HTML：

<ul class="main_menu__list" data-scheme="light">
...
</ul>

JS：

$('.main_menu__list').data('scheme', 'dark');
$('.main_menu__list').css('border', '10px solid yellow');

第二行确实有效（应用黄色边框），第二行无效。为什么呢？

Answer 1

第一行工作正常。 data()方法将值存储在内存缓存中，因此不必经常查询DOM，因此速度更快（至少在理论上）。它根本不更新DOM。

只要你还使用data()的getter来检索这个值就可以了：

var $list = $('.main_menu__list');

$list.data('scheme', 'dark').css('border', '10px solid yellow');

// to retrieve the attribute:

console.log($list.data('scheme')); // 'dark'

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main_menu__list" data-scheme="light"></ul>

即使使用另一个答案中建议的attr（），它仍然不会改变它！

是的，确实如此。运行此代码段后，您可以在DOM检查器中检查它：

var $list = $('.main_menu__list');

$list.attr('data-scheme', 'dark').css('border', '10px solid yellow');

// to retrieve the attribute:

console.log($list.data('scheme')); // 'dark'

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main_menu__list" data-scheme="light"></ul>

Answer 2

使用此：

$('.main_menu__list').attr('data-scheme', 'dark');

而不是：

$('.main_menu__list').data('scheme', 'dark');

无法使用jQuery将值设置为data属性

2 个答案: