javascript - 在 mouseenter 上，如果复选框被选中，则执行 X，否则执行 Y

Question

我想在页面上设置一个复选框以在密码框中显示/隐藏密码。如果它们是隐藏的，那么它们将在悬停该元素时显示。

我唯一遇到的问题是 var 在页面加载时与其余 jquery 加载时一起保存。我怎样才能在每次鼠标进入/离开时确保复选框是否被选中？

jsfiddle

window.hide_passwords = $('#hide_passwords').attr('checked');

if(hide_passwords) {
    $("main table tbody tr").on({
        mouseenter: function() {
            $(this).children('td:first-child').children('input').attr('type', 'text');
        },
        mouseleave: function() {
            $(this).children('td:first-child').children('input').attr('type', 'password');
        }
    });
} else {
    $('input[type="password"]').attr('type', 'text');
}

$('#hide_passwords').click(function() {
    if($(this).prop('checked')) {
        window.hide_passwords = false;
    } else {
        window.hide_passwords = true;
    }
});

Answer 1

使用 .is(":checked") 检查复选框是否被选中。

window.hide_passwords = $('#hide_passwords').attr('checked');


    $("main table tbody tr").on({
        mouseenter: function () {
            if ($("#hide_passwords").is(":checked")) {
                $(this).children('td:first-child').children('input').attr('type', 'text');
            }
        },
        mouseleave: function () {
            if ($("#hide_passwords").is(":checked")) {
                $(this).children('td:first-child').children('input').attr('type', 'password');
            }
        }
    });

Demo