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 (описание 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'); 
});