如何使用jQuery切换数据属性？

Question

我需要在数据属性之间切换两个可能的值。

如果 data-state 等于 enabled，那么我想将其更改为 disabled，反之亦然。

$('.sites .state').on('ajax:success', function(data, status, xhr) {
   var site = $(this).parents('article').first();

   if (site.data('state') == 'enabled') {
     site.attr('data-state', 'disabled');
   } else {
     site.attr('data-state', 'enabled');
   }
});

注意：我需要更改DOM元素，而 据我所知，我无法使用 data 来完成这个操作（因此使用了 attr）。

- Shpigford

---

@VisioN 请看我的更新。我需要更改DOM元素，据我所知，我不能使用数据来做到这一点（因此使用attr）。 - Shpigford

Answer 1

site.attr('data-state', 'disabled');

应该是

site.data('state', 'disabled');

当一个元素被创建时，可以使用data-<value>属性来初始化数据属性，但在那之后，必须使用jQuery.data()方法来获取或修改数据。

当使用$(el).data('<data-name>')来获取值时，$(el).data('<data-name>', value)则用于设置数据值。

更新：基于更新的要求。

$('div').attr('data-state', $('div').attr('data-state') == 'enabled' ? 'disabled' : 'enabled')

Fiddle

- Arun P Johny

---

我需要更改DOM元素，据我所知，无法使用数据（data）来实现这一点（因此使用了属性(attr)）。 - Shpigford

Answer 2

我不确定问题出在哪里，但由于你正在使用.data()，所以最好在if/else中继续使用它。使用.attr('data-state')会将数据保存在DOM元素本身上（在检查元素时可见），而使用.data('state')则是不可见的，而且速度更快。

另外，如果你使用三元运算符，就可以将其缩成一行：

site.attr('data-state', site.data('state') === 'enabled' 
    ? 'disabled' 
    : 'enabled');

- Mark Pieszak - Trilon.io

---

我需要更改DOM元素，据我所知，我不能使用数据来实现这一点（因此使用attr）。 - Shpigford

Answer 3

site.data('state', (site.data('state') == 'enabled' ? 'disabled' : 'enabled'))

- Robin Maben