jquery - 在加载和单击时调用相同的 jQuery 函数

Question

在我的“更新”页面中，我经常需要在页面加载和单击某些复选框时调用相同的 jQuery 函数，大多是这样的:

function foo(){
    if ($('#mycheckbox').is(':checked')){
        $('.myclass').hide();
    } else {
        $('.myclass').show();
    }
}

$(function() {

    foo(); // this is launched on load
    $('#mycheckbox').click(function(){
        foo(); // this is launched on checkbox click
    })  

});

在页面加载时，可以根据数据库值来选中或不选中该复选框:这就是为什么我需要启动 foo();加载时

嗯，这很好用，但我一直想知道......是否有更好或最优雅的解决方案？提前致谢

Answer 1

您可以使用trigger()立即触发事件的函数；

$('#mycheckbox').click(function (){
    if ($('#mycheckbox').is(':checked')){
        $('.myclass').hide();
    } else {
        $('.myclass').show();
    }
}).trigger('click'); 

但是，请记住，这也会触发您在元素上定义的任何其他点击处理程序。

或者，您可以编写一个小型 jQuery 插件来为您完成此操作；

jQuery.fn.nowAndOn = function (event, handler) {
    handler();

    this.bind(event, handler);

    return this; // support chaining
};

你会像这样使用它；

$(function() {
    $('#mycheckbox').nowAndOn('click', function (){
        if ($('#mycheckbox').is(':checked')){
            $('.myclass').hide();
        } else {
            $('.myclass').show();
        }
    });
});

但是，这样做的问题是，在点击处理程序中，this 通常是当前元素；而通过调用 handler(); 就像我们在这里所做的那样，this 将指向 window (这与您的确切代码片段无关)已发布，因为您不使用this)。

要解决此问题，我们可以添加一些复杂性并使用 Function.call设置 this 值的方法；

jQuery.fn.nowAndOn = function (event, handler) {
    this.each(function () {
        handler.call(this);
    });

    this.bind(event, handler);

    return this;
};

但是，如果您依赖于传递的 Event 对象，您仍然会遇到问题...