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