4

我是这个论坛的新手，对 jQuery 也很陌生，所以它（我认为）是一个基本问题，但我找不到答案，我尝试的一切都没有奏效。

我在页面上有一个按钮，应该做某些事情并更改课程。并通过新课程恢复这些东西。

这是代码：

    $("#info_button.buttonOff").click(function() {
    $(".content").slideUp(300, function() {
        $("#info").slideDown(300);
        $("#info").addClass("contentOn");
        $("#info_button").removeClass("buttonOff").addClass("buttonOn");
        $("#overlay").fadeIn(300);
    });
});

$("#info_button.buttonOn").click(function() {
    $(".content").slideUp(300);
    $("#info").removeClass("contentOn");
    $("#info_button").removeClass("buttonOn").addClass("buttonOff");
    $("#overlay").fadeOut(300);
});

第一个事件单独工作。但是，一旦我添加了第二个事件，就不再起作用了。我想我必须用 .unbind() 做点什么，但不知道怎么做。

请帮忙。

4

4 回答 4

4

问题是 jQuery 集合只计算一次。

采用

$(document).on('click', "#info_button.buttonOff", function() {

和

$(document).on('click', "#info_button.buttonOn", function() {

这样，每次点击时都会测试选择器。

由于您的元素有一个 ID，一个更轻的解决方案可能是

$("#info_button").click(function() {
    if ($(this).hasClass('buttonOn')) {
       // do something
    } else {
       ...

但我通常更喜欢第一个。

于 2012-10-29T14:00:29.807 回答
0

最简单的解决方案是在按钮的单击处理程序中测试类：

$("#info_button").click(function() {
  if ($(this).hasClass('buttonOff')) {
    // ...
  } else if ($(this).hasClass('buttonOn')) {
    // ...
  }
});
于 2012-10-29T14:03:57.507 回答
0

采用 ：

$(document).on('click', "#info_button", function() {
    $(".content").slideUp(300, function() {
        if ($("#info").is(':visible'))
            $("#info").slideUp(300);
        else
            $("#info").slideDown(300);
        $("#info").toggleClass("contentOn");
        this.toggleClass("buttonOn").toggleClass("buttonOff");
        if ($("#overlay").is(':visible'))
            $("#overlay").fadeOut(300);
        else
            $("#overlay").fadeIn(300);
    });
});
于 2012-10-29T14:04:44.937 回答
-1

可能发生的情况是您的两个绑定事件都引用同一个元素，因此这些函数可能会相互干扰。

你可以尝试做这样的事情：

$("#info_button").click(function() {
if($(this).hasClass('buttonOff') {
    $(".content").slideUp(300, function() {
        $("#info").slideDown(300);
        $("#info").addClass("contentOn");
        $("#info_button").removeClass("buttonOff").addClass("buttonOn");
        $("#overlay").fadeIn(300);
    });
} else if($(this).hasClass('buttonOn') {
$(".content").slideUp(300);
    $("#info").removeClass("contentOn");
    $("#info_button").removeClass("buttonOn").addClass("buttonOff");
    $("#overlay").fadeOut(300);
    });
}
});
于 2012-10-29T14:04:48.123 回答