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

如果上面的div具有相同的选择器id，为什么div

.close

不将on方法返回给它们

编辑：为了清楚起见，我想暂时删除两个元素中未单击的（

#filter

或

#sort

）上的on事件。然后单击

”。关闭“

”将使所述元素再次返回on方法。

您可以尝试：

$('#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');
});

---

我假设在你的代码块中

$('#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));
});

您要单击

#排序

和

#筛选

。为此，您需要执行以下操作：

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

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

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

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

---

这将做任何事情：

$（'#sort'）。在（'click'）

您需要调用：
$（'#sort'）.trigger（'click'）
关闭（
的方式与您想象的方式不同。它实际上删除了事件处理程序（回调函数），而不仅仅是隐藏它们，因此您无法使用简单的
on（）
还原它们，它们不再由元素存储在
off（）
之后，您必须再次添加它们。跟踪是否添加了事件处理程序并不容易，因此我建议使用另一种方法

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

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

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

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

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

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

@DhavalMarthak你最好简明扼要地使用
$（选择器）。单击（）
@Luxelin-Yup。。这也可以使用！：）实际上有人为编写了jQuery插件。他删除了事件处理程序。他试图将其添加回去，而不是触发它。谢谢，没有捕捉到。也许这是我解释此特定请求的错误方式。我不希望“.close”启动对排序或筛选器的单击，我希望它将on方法返回到sort或filter（取决于前两个块中已删除的部分）@lxm7您是说要临时删除事件处理程序吗？是的，当选择一个（筛选或排序）时，另一个未选中的处理程序会临时删除on方法，直到单击“.close”将其返回给已删除的元素。为了清楚起见，我将把这个添加到问题中。谢谢你，谢谢你的全面投入！最上面的一个运行良好，现在将尝试后一个OO版本。