jquery - 点击函数后的回滚类

Question

我在主 div 中有很多 div，很难准确地选择那个 div。假设这样：

<div id="main">
  <div>
   <div></div>
   <div>
     <div>
       <div>
       <div class="myclass">
       </div>
.....
</div>

因此，使用我的标记，我可以选择以下类：.myclass

首先，我必须myclass像这样删除它：$('.myclass').removeClass('myclass');

接下来我要添加添加相同的类

所以我尝试这样：

$('.thisclass').addClass('myclass').removeClass('thisclass');
$('.myclass').addClass('thisclass').removeClass('myclass');

但是在开/关点击功能里面

你可以在这个小提琴中看到它没有做我想要的。

所以我的关键问题是如何在点击功能后回滚上一个课程。我需要删除以前的课程并在 click 之后。

就像 mouseenter 和 mouseleave 但我在 on('click') 之后非常需要

Answer 1

可能这会帮助你

$('#clickthis').on('click', function(){
    $('.thisclass, .myclass').toggleClass('myclass thisclass');

});

在这里检查

Answer 2

你的意思是这样的：

$('#clickthis').on('click', function(){
    $('.thisclass').addClass('myclass').removeClass('thisclass');

//call this function later, after the 'click' event has been handled :
    setTimeout(function(){
        $('.myclass').addClass('thisclass').removeClass('myclass');
    }, 0);
});

---

你不应该使用setTimeout，你应该使用函数的complete回调.animate()：

$(...).animate( ...,  function(){
    //this function will be called once the animation is finished

    $('.myclass').addClass('thisclass').removeClass('myclass');
    // add any action you want to take on animation's end
})

jQuery 的所有效果函数（例如：fadeIn、slideToggle等）都接受complete回调。