0

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

这是两个按钮的 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”类）。当一个按钮“打开”时，我不希望人们能够将鼠标悬停在它上面并看到效果（这就是为什么 include 没有 'hov' 类而 exclude 有），我不想点击它做任何事情。要切换模式，我希望人们必须单击另一个按钮。

当有人单击“排除”按钮时，我可以使用jQuery实现我想要的效果，并且我可以使该按钮在被单击后停止激活（使用$("#exclude").unbind();），但是当有人单击“包含”时'按钮我不知道如何使“排除”按钮再次变为活动状态。

我也不知道如何防止页面首次加载时“包含”按钮处于活动状态。但我还没有真正玩过这部分。

这是一些代码：

$("#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!
})
4

2 回答 2

1

If you want a global switch to turn events on/off, there isn't one. But you can 'mock' one by having a global variable that is checked within the function of the triggered event.

For example:

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
于 2013-02-25T09:03:29.053 回答
1

该.bind()函数没有先前删除的处理程序的“内存”。如文档中所述，.bind()您必须以与将函数传递给.click().

与其尝试解除绑定然后重新绑定，不如这样：

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

...和其他按钮类似。也就是说，当控件被单击时，检查它是否已经“打开”，如果是，则什么也不做（即立即返回）。

于 2013-02-25T08:09:28.383 回答