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

jQuery onclick没有隐藏div

3 个答案: