使用 jQuery 添加数据变量

Question

我正在尝试向 document.ready 上的元素添加数据属性以设置默认加载状态。

我目前有：

jQuery(document).ready(function($) {
    $('#menu-primary-navigation li.isMobile').data('status','closed');
)};

我期待看到以下内容 HTML

<li class="isMobile" data-status="closed" >foo</li>

但是我似乎没有看到添加了任何数据属性。我是不是用错了.data()？

Answer 1

$('#menu-primary-navigation li.isMobile').attr('data-status','closed');

这里有一个小的 jsfiddle 来展示它是如何工作的：http://jsfiddle.net/o3mLb53r/

jQuery data() function 并不像您想象的那样，它与数据属性无关。

Answer 2

当用作 setter 时，

data() 不会向您的元素添加实际的 data-* 属性。相反，它将

Store arbitrary data ...

尽管当用作 getter

时，它可以从现有的 data-* 属性中读取

As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object.

有关如何存储此任意数据的详细信息，请参阅Where is jQuery.data() stored?

改用attr()

$('#menu-primary-navigation li.isMobile').attr('data-status','closed');