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整个脚本不起作用。在控制台或错误中没有迹象。我是jQuery的新手，无法弄清楚这一点。

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

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

Answer 1

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

您可以通过使用一个单一的处理程序大大简化了这一点，就像这样：

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

Answer 2

，你可以简单地做：

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

即

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