javascript - jQueryでデータ属性を切り替えるには?

Question

データ属性の 2 つの可能な値を切り替える必要があります。

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)。

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')

フィドル

Answer 2

問題が何であるかはよくわかりませんが、.data()使用しているので、if/else で使用し続けることもできます。実行すると、 DOM.attr('data-state')要素自体に保存されますが（要素を検査すると表示されます）、.data('state')それを使用すると非表示になり、高速になります。

また、三項演算子を使用すると、1 つの小さな行にすることができます。

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

Answer 3

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