javascript - デバッガーで変更を確認したときに、要素の属性が変更されたと表示されないのはなぜですか?

Question

私は次のHTMLを持っています:

<div class="button accessLink" id="loginLink" data-action="Login" 
data-dialog="access" data-disabled="no" data-entity="n/a" 
data-href="/User/Access/Login" title="Login" 
style="-webkit-user-select: none;" data-title="Login">Login</div>

いくつかのコードがあり、デバッガーをステップ実行すると、$(targetSelector) が #loginLink に設定されて以下が実行されることがわかります。

$(targetSelector).attr('data-disabled', 'yes');

クロム開発者ツールでもう一度確認すると、次のように表示されます。

<div class="button accessLink" id="loginLink" data-action="Login" 
data-dialog="access" data-disabled="no" data-entity="n/a" 
data-href="/User/Access/Login" title="Login" 
style="-webkit-user-select: none;" data-title="Login">Login</div>

data-disabled が変更されないように見える理由を誰かが説明できますか?

Answer 1

値debuggerがrefreshing変更されていないか、何かが不足している可能性があります。変更を確認するには、アラートなどを使用してそれらを印刷する必要があります。あなたのステートメントは正しいようで、属性を変更しています。

ライブデモ

$('#loginLink').attr('data-disabled', 'yes');    
alert($('#loginLink').attr('data-disabled'));

データ属性を変更しようとしていて、jQuery はデータ属性を設定および取得するための data() 関数を提供するため、attr() の代わりに data() を使用します。

ライブデモ

$('#loginLink').data('disabled', 'yes');
alert($('#loginLink').data('disabled'));

Answer 2

このようにしてみてください

   $('#loginLink').data('disabled', 'yes');