Question

我的网站上有两个按钮，用作切换以允许'包含'或'排除'模式。默认情况下突出显示包含按钮。

这是两个按钮的HTML：

<div class="smallmenu women abs on" id="include"><div class="text">include</div></div>
<div class="smallmenu men abs hov" id="exclude"><div class="text">exclude</div></div>

默认情况下激活包含（因此'on'类）。当一个按钮“打开”时，我不希望人们能够将鼠标悬停在它上面并看到一个效果（这就是为什么包含没有'hov'类并排除它的原因）并且我不希望单击它做任何事情。要切换模式，我希望人们必须单击其他按钮。

当有人点击“排除”按钮时，我可以使用 jQuery 制作我想要的效果，并且一旦点击该按钮，我就可以使该按钮停止激活（使用$("#exclude").unbind();），但当有人点击'include'按钮时，我不知道如何让'排除'按钮再次变为活动状态。

我还不知道如何阻止'include'按钮在首次加载页面时处于活动状态。但我还没有真正玩过这部分。

以下是一些代码：

$("#exclude").click(function() {
    $(this).toggleClass("on");
    $(".filtercategory").toggleClass("inc");
    $("#include").toggleClass("on");
    $("#include").toggleClass("hov");
    $(this).toggleClass("hov");
    $("#alternatefilterinfo").toggleClass("hide");
    $("#defaultfilterinfo").toggleClass("hide");
    $("#exclude").unbind();
        }); 


$("#include").click(function() {
    $(this).toggleClass("on");
    $(".filtercategory").toggleClass("inc");
    $("#exclude").toggleClass("on");
    $("#exclude").toggleClass("hov");
    $(this).toggleClass("hov");
    $("#exclude").bind(); //this line fails to do anything!
})

Answer 1

.bind()功能没有＆＃34;内存＆＃34;之前删除的处理程序。正如the .bind() documentation中所述，您必须将其传递给函数的方式与将{1}}传递给.click()的方法相同。

不是试图解除绑定然后重新绑定，而是如何：

$("#exclude").click(function() {
   if ($(this).hasClass("on")) {
       return;
   }
   // your other code here
});

...和其他按钮类似。也就是说，当点击控件时，检查它是否已经＆＃34; on＆＃34;如果不这样做（即立即返回）。

Answer 2

如果您希望global开关打开/关闭事件，则没有。但是你可以通过在触发事件的函数中检查全局变量来“模拟”一个。

例如：

var eventsSwitchedOn = true; //global switch

$("#mybutton").click(function() {
    if(eventsSwitchedOn) { alert("I am allowed to fire a click event!"); }
});

//now you can test it like this:

eventsSwitchedOn = false;

$("#mybutton").click(); //will do nothing

eventsSwitchedOn = true;

$("#mybutton").click(); //will alert the message

如何打开和关闭许多jQuery单击激活的功能，然后再次打开它们

2 个答案: