如何使用 jQuery 切换数据属性

How to toggle data attribute with jQuery?

本文关键字：数据属性 jQuery 何使用      更新时间：2023-09-26

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

如果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 ）。

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

应该是

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

创建元素时，可以使用 data-<value> 属性初始化 data 属性，但之后您必须使用 jQuery.data（） 方法来获取或修改数据。

当$(el).data('<data-name>')返回值时，$(el).data('<data-name>', value)设置数据值。

已更新：基于更新的要求

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

小提琴

不太确定问题是什么，但是既然您正在使用.data()，您不妨继续在if/else中使用它。执行.attr('data-state')将其保存在 DOM 元素本身（检查元素时可见），而使用 .data('state') 它是不可见的，而且速度更快。

此外，如果您使用三元运算符，您可以将其分成 1 条小线：

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

site.data('state', (site.data('state') == 'enabled' ? 'disabled' : 'enabled'))
相关文章：