jquery - jQuery onclick 不隐藏 div

Question

$(document).ready(function(){
    /* The following code is executed once the DOM is loaded */

  $('.box-wrap').bind("click",function(){
        $(this).find('.card').addClass('flipped').bind('click',function(){
          $(this).removeClass('flipped');
        });
    });  
      return false;
});

如果我重新单击该 div 它可以工作，但是第二次单击另一个 div 整个脚本不起作用。控制台或错误中没有任何迹象。我是 jQuery 新手，无法弄清楚这一点。

$(this).find('.card').addClass('flipped').mouseleave(function(){

这段代码有效，但不是我要找的。请帮忙

Answer 1

您想要该.toggleClass方法（在此处描述）。现在，在您第二次单击该框后，它有两个事件处理程序 - 一个用于flipped在单击时添加类，另一个用于删除它。它执行第一个，然后执行另一个，然后添加一个新的处理程序以在每次新单击时将其删除。

您可以通过使用单个处理程序大大简化这一点，如下所示：

$(document).ready(function(){
  $('.box-wrap').bind("click",function(){
        $(this).find('.card').toggleClass('flipped');
  });  
});

Answer 2

你可以简单地做：

$(this).find('.card').toggleClass("flipped");

IE

$('.box-wrap').bind("click",function(){
   $(this).find('.card').toggleClass("flipped");
});  

Answer 3

$(document).ready(function(){
    /* The following code is executed once the DOM is loaded */

  $('.box-wrap').click(function(){
        $(this).find('.card').addClass('flipped');

        });
    },
      function(){
      $(this).find('.card').removeClass('flipped');
});