Question

我是这个论坛的新手，也是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（）做一些事情，但无法弄清楚如何。

请帮忙。

Answer 1

问题是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 {
       ...

但我通常更喜欢第一个。

Answer 2

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

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

Answer 3

使用：

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

Answer 4

可能发生的事情是你的两个绑定事件都指的是同一个元素，所以这些函数可能会相互干扰。

您可以尝试这样做：

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

更改类后的jQuery id和类选择器

4 个答案: