Javascript jQuery基本切换只能以一种方式工作

我创建了一些快速jQuery切换代码：

$("#expander.closed").click(function(){
    console.log("opening");
    $("#expander").removeClass();
    $("#expander").addClass("open");
});
$("#expander.open").click(function(){
    console.log("closing");
    $("#expander").removeClass();
    $("#expander").addClass("closed");
});

其思想是每次单击

#expander

时，类都会在

打开

和

关闭

之间切换

然而，由于某些原因，它只工作一次，从

关闭

更改为

打开

，然后不再继续

---

我不知道为什么

我认为在开始绑定事件时，

.closed

类不存在，因此事件不会被绑定

可能您应该将事件绑定到其他一些条件，或者使用

live

。但这是不赞成的

更好的办法是这样

$("#expander_parent").on('click', '#expander.closed', function(){
    // Do your stuff
})

$("#expander").click(function(){
    var $this = $(this);
    $this.toggleClass('open closed');
    if($this.hasClass('open')){
       // do your open code
    }else{
       // do your close code
    }   
});

---

我认为在开始时，当您绑定事件时，

.closed

类不存在，因此事件不会被绑定

可能您应该将事件绑定到其他一些条件，或者使用

live

。但这是不赞成的

更好的办法是这样

$("#expander_parent").on('click', '#expander.closed', function(){
    // Do your stuff
})

$("#expander").click(function(){
    var $this = $(this);
    $this.toggleClass('open closed');
    if($this.hasClass('open')){
       // do your open code
    }else{
       // do your close code
    }   
});

---

只需使用id绑定它，并使用

如果您需要根据它拥有的类执行其他函数，您可以这样检查

$("#expander_parent").on('click', '#expander.closed', function(){
    // Do your stuff
})

$("#expander").click(function(){
    var $this = $(this);
    $this.toggleClass('open closed');
    if($this.hasClass('open')){
       // do your open code
    }else{
       // do your close code
    }   
});

---

只需使用id绑定它，并使用

如果您需要根据它拥有的类执行其他函数，您可以这样检查

$("#expander_parent").on('click', '#expander.closed', function(){
    // Do your stuff
})

$("#expander").click(function(){
    var $this = $(this);
    $this.toggleClass('open closed');
    if($this.hasClass('open')){
       // do your open code
    }else{
       // do your close code
    }   
});

---

您可以在if/else条件下执行此操作并添加其他相关操作

HTML:

<div id="expander" class="closed">Click Me</div>

.closed {
    background-color: red;
}

.open {
    background-color: blue;
}

$("#expander.closed").click(function (){
    if ($('#expander').attr('class') === 'closed') {
          $('#expander').attr('class', 'open');

          // Add other related functions here
    } else {
        $('#expander').attr('class', 'closed');

        // Add other related functions here
    }    
});

Javascript:

<div id="expander" class="closed">Click Me</div>

.closed {
    background-color: red;
}

.open {
    background-color: blue;
}

$("#expander.closed").click(function (){
    if ($('#expander').attr('class') === 'closed') {
          $('#expander').attr('class', 'open');

          // Add other related functions here
    } else {
        $('#expander').attr('class', 'closed');

        // Add other related functions here
    }    
});

---

您可以在if/else条件下执行此操作并添加其他相关操作

HTML:

<div id="expander" class="closed">Click Me</div>

.closed {
    background-color: red;
}

.open {
    background-color: blue;
}

$("#expander.closed").click(function (){
    if ($('#expander').attr('class') === 'closed') {
          $('#expander').attr('class', 'open');

          // Add other related functions here
    } else {
        $('#expander').attr('class', 'closed');

        // Add other related functions here
    }    
});

Javascript:

<div id="expander" class="closed">Click Me</div>

.closed {
    background-color: red;
}

.open {
    background-color: blue;
}

$("#expander.closed").click(function (){
    if ($('#expander').attr('class') === 'closed') {
          $('#expander').attr('class', 'open');

          // Add other related functions here
    } else {
        $('#expander').attr('class', 'closed');

        // Add other related functions here
    }    
});

---

谢谢你的回答。然而，在更广泛的情况下，我需要执行与函数切换方式相关的其他函数。（基本上，在一次点击时做一些动画，然后在另一次点击时反转动画。）有没有办法使用这个解决方案我可以做类似的事情？干杯。你不会碰巧知道为什么我的动画不起作用吧？谢谢。@ACarter您忘记了选择器中的

#

，谢谢您的回答。然而，在更广泛的情况下，我需要执行与函数切换方式相关的其他函数。（基本上，在一次点击时做一些动画，然后在另一次点击时反转动画。）有没有办法使用这个解决方案我可以做类似的事情？干杯。你不会碰巧知道为什么我的动画不起作用吧？谢谢。@ACarter您忘记了选择器中的

#

，谢谢您的回答。但是为什么使用父级是更好的方法呢？JQuery

on

使用父级委托事件触发器。但是，我仍然支持wirey的解决方案，它对于您的案例是简化的。但是，当您在绑定事件时没有元素，并且仍然希望能够使用它时，请使用上的

，

查看此参考，谢谢您的回答。但是为什么使用父级是更好的方法呢？JQuery

on

使用父级委托事件触发器。但是，我仍然支持wirey的解决方案，它对于您的案例是简化的。但是，当您在绑定事件时没有元素并且仍然希望能够使用它时，请使用上的

查看此内容以供参考