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

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()做些什么，但是我还没有想出来怎么做。

请帮忙。

- Andy Lang

---

+1 意味着支持这个问题，可以帮助人们澄清一些概念。请检查我的答案以获取可能的解决方案。 - Pulkit Mittal

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 {
       ...

但我通常更喜欢第一个。

- Denys Séguret

---

为什么更喜欢第一个？因为它使用事件委托，阅读起来更困难且效率更低。 - Blazemonger

因为它让jQuery的事件委托系统发挥了它应有的作用，从而使回调代码更加简洁。但我并不是说第二种方法是错误的，只要有一些因式分解可能，我就会尽快使用它。 - Denys Séguret

谢谢，问题已解决。我先尝试了使用.live方法，虽然也能工作但有些buggy，后来我读到这在新版本的jquery中已不再支持。 - Andy Lang

Answer 2

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

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

- Blazemonger

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

- Laurent Brieu

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

- Pulkit Mittal

---

"你的两个绑定事件都指向了相同的元素"：这是错误的解释。问题在于这两个初始集合中有一个是空的。 - Denys Séguret