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