HTML5属性の操作：Vanilla JSとjQueryの比較

Question

vanilla JSとjQueryで要素の属性値を変更すると、同じように動作しないことがありますか？ 1つのシナリオは私が作成した実験で、「パスワードを表示」ボタンがクリックされるたびに、パスワードフィールドのtype属性の値は、passwordのときtextに変更されるはずです。バニラJSでは正常に動作しましたが、jQueryではうまく動作しませんでした。 jQueryでは、属性値がtextに変更されますが、passwordに戻したい場合は機能しません。なぜこのような問題が起こるのですか？

バニラJS

document.querySelector('.show-password').onclick = function() { 
    if(document.querySelector('#password').type == 'password') { 
     document.querySelector('#password').type = 'text'; 
    } else { 
     document.querySelector('#password').type = 'password'; 
    } 
} 

jQueryが

$('.show-password').click(function() { 
    if($('#password').attr('type', 'password')) { 
     $('#password').attr('type', 'text'); 
    } else { 
     $('#password').attr('type', 'password'); 
    } 
}); 

Answer 1

if($('#password').attr('type', 'password'))のでtype属性が 'パスワード' であるかどうかを尋ねるされていません。 if文にはtype = passwordとreturning a jQuery objectが設定されています。

.attr（）がone parameterとだけ使用されると、選択された要素からその属性が取得されるため、$("#password").attr("type") == "password"を使用してその属性を取得できます。