Question

我想更新以下代码，该代码应该在点击.card面板时删除/添加类，而不是当前它所执行的mouseleave。

http://jsfiddle.net/GDdtS/9884/

$('.flip').click(function(){
    $(this).find('.card').addClass('flipped').mouseleave(function(){
        $(this).removeClass('flipped');
    });
    return false;
});

Answer 1

您可以检查该类是否存在，然后有条件地决定要做什么（根据需要添加或删除一个类）：

$('.flip').click(function(){
    var card = $(this).find('.card');
    if (!card.hasClass('flipped')) {
        card.addClass('flipped');
    } else {
        card.removeClass('flipped');
    }             
    return false;
});

如果您想使用不同的按钮翻转卡片，您可以使用以下内容：

$('.flip').click(function(){
   var card = $(this).find('.card');
   if (!card.hasClass('flipped')) {
      card.addClass('flipped');
   }
   return false;
});
$('.exit').click(function(){
  var card = $(this).closest('.exit').parents('.card');
  card.removeClass('flipped');
  return false;
});

单击背面的关闭按钮时，将会返回。它将获得关闭按钮，并尝试找到类 .card 的父级，以删除 .flipped 类

 <div class="flip"> 
    <div class="card"> 
        <div class="face front"> 
            Front
        </div> 
        <div class="face back"> 
            <div class="exit">x</div>
            Back
        </div> 
    </div> 
</div>

我创建了一个小提琴的叉子：http://jsfiddle.net/8n3gokua/1/

Answer 2

您可以尝试以下代码

 $('.flip').click(function(){
    $(this).find('.card').toggleClass('flipped');
    return false;
});

Answer 3

你可以像下面这样使用.toggleClass：

$('.flip').click(function(){
    $(this).find('.card').toggleClass('flipped')
});

您可以从here了解详情。

Answer 4

这样的东西？

$('.flip').bind("click mouseleave", function(){
    $(this).find('.card').toggleClass('flipped');
});

如何使用JQuery构建简单的卡片翻转效果

4 个答案: