javascript - HTML5 属性操作 : Vanilla JS vs. 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 和 returning a jQuery object到 if 语句。

当 .attr() 仅与 one parameter 一起使用时，它从所选元素获取该属性，因此您可以使用 $("#password").attr("type") == "password" 来实现。