Question

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

我唯一要努力的是var在页面加载时以及jquery的其余部分加载时保存。如何在每个mouseenter / leave中确保选中复选框？

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

Answer 2

var window.hide_passwords = document.getElementById("hide_passwords");
window.hide_passwords = window.hide_passwords.checked
var container = document.querySelectorAll("main table tbody tr");
var i = 0, length = container.length;
for (i; i < length; i++) {
    container[i].addEventListener("mouseover", function() {
        if (window.hide_passwords) {
            // Your stuff here
        } else {

        }
    }
}

我只在Native JS工作，很抱歉断开连接。

Answer 3

您可以将bind和unbind方法用于相同的行为。

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

function showPass() {
    $("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');
        }
    });
}

$('#hide_passwords').click(function () {
    if ($(this).prop('checked')) {
        showPass();
    } else {
        $('input[type="password"]').attr('type', 'password');
        $("main table tbody tr").unbind();
    }
});

Demo

在mouseenter上，如果选中了复选框，则执行X，否则执行Y.

3 个答案: