HTML5属性操作:Vanilla JS与jQuery

Question

为什么在vanilla 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".