Question

$('#filter').on('click', function(){
    $('#sort').off('click');
    console.log($(this));
});

$('#sort').on('click', function(){
    $('#filter').off('click');
    console.log($(this))
});

$('.close').on('click', function () {
    console.log($(this));
    $('#sort').on('click');
    $('#filter').on('click');
});

为什么div .close如果具有相同的选择器ID，则不会将on方法返回给上面的div？

编辑：为清楚起见，我想暂时删除未点击（#filter或#sort）这两个元素中的on事件。然后单击'.close'将使所述元素返回到再次使用on方法。

Answer 1

off()无法按您的想法运作。它实际上删除了事件处理程序（回调函数），而不仅仅是隐藏它们，因此您无法使用简单的on()恢复它们，off()后元素不再存储它们，您必须再次添加它们。跟踪是否添加了事件处理程序并不容易，因此我建议采用另一种方法。

var sort = true;
var filter = true;

$('#filter').on('click', function(){
    if (!filter)
        return;
    sort = false;
    console.log($(this));
});

$('#sort').on('click', function(){
    if (!sort)
        return;
    filter = false;
    console.log($(this))
});

$('.close').on('click', function () {
    console.log($(this));
    sort = true;
    filter = true;
});

使用toggle()并将其与on()和off()函数结合使用的另一种方法。嗯，我发现jquery toggle()没有松散地耦合到dom元素，所以你不能这样做。您必须创建自己的实现，例如：

function toggle(options) {
    var currentValue = !!options.value;
    return function (value){
        if (value === undefined)
            value = !currentValue;
        if (value != currentValue)
            if (value) {
                currentValue = true;
                options.on();
            }
            else {
                currentValue = false;
                options.off();
            }
    };
}

使用此切换实现，您的代码将如下所示：

var switches = {
    sort: toggle({
        on: function (){
            $('#sort').on('click', function(){
                switches.filter(false);
                console.log($(this))
            });
        },
        off: function (){
            $('#sort').off('click');
        }
    }),
    filter: toggle({
        on: function (){
            $('#filter').on('click', function(){
                switches.sort(false);
                console.log($(this));
            });
        },
        off: function (){
            $('#filter').off('click');
        }
    })
};

$('.close').on('click', function () {
    console.log($(this));
    switches.sort(true);
    switches.filter(true);
});

switches.sort(true);
switches.filter(true);

Answer 2

您可以尝试：

$('#filter:not(.off)').on('click', function(){
    $('#sort').addClass('off');
    console.log($(this));
});

$('#sort:not(.off)').on('click', function(){
    $('#filter').addClass('off');
    console.log($(this))
});

$('.close').on('click', function(){
    $('#sort').removeClass('off');
    $('#filter').removeClass('off');
    console.log($(this));
});

Answer 3

我假设你的代码块......

$('.close').on('click', function () {
    console.log($(this));
    $('#sort').on('click');
    $('#filter').on('click');
});

您想点击#sort和#filter。为此，您需要执行以下操作：

$('.close').on('click', function () {
    console.log($(this));
    $('#sort').click();
    $('#filter').click();
});

即便如此，最好将其他事件处理程序包装在一个函数中，然后像这样调用它们：

$('.close').on('click', function () {
    console.log($(this));
    sortClickFunction();
    filterClickFunction();
});

Answer 4

这将执行任何操作：$('#sort').on('click');

您需要致电：$('#sort').trigger('click');

交替选项卡上的开/关单击事件

4 个答案: