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

$('#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？

编辑：为清楚起见，我想暂时删除未单击两个元素中的任何一个元素的on事件（#filter或#sort）。然后单击'.close'将使该元素再次具有on方法。

最佳答案

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);

关于javascript - 交替选项卡上的开/关单击事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22072297/