HTML5屬性操作：Vanilla JS與jQuery

Question

為什么在原始JS和jQuery中更改元素的屬性值有時會無法正常工作？ 一種情況是我創建的實驗，在該實驗中，每當單擊“顯示密碼”按鈕時，應該將密碼字段的type屬性值更改為text如果為password ，反之亦然。 它在Vanilla 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屬性是否為'password'。 它設置type = password並將jQuery對象返回到if語句。

當.attr（）僅與一個參數一起使用時 ，它將從所選元素中獲取該屬性，因此可以使用$("#password").attr("type") == "password" 。