jQuery翻转不带类的容器

Question

我有4个卡片容器，如果你点击每一个，它们就会分别翻转。

之后，一个按钮可以一次将它们全部翻转(见下文)。我想做的是，如果一张牌被单独翻转，类.hover就会被添加，如果你点击按钮将它们全部翻转，它应该会翻转剩余的3个容器，添加相同的类。如果再次点击此按钮，则删除类.hover。

​

$("#rotateAll").click(function() {
  var card = $('.card-container');
  if (card.hasClass('hover')) {
    card.removeClass('hover');
  } else {
    card.addClass('hover');
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="rotateAll" title="link title" href="javascript:void(0)" class="btn btn-sm btn-default">Ver todas las tarifas</a>

​

我想要的就是翻转任何未翻转的剩余容器的按钮。

Answer 1

只需先创建一个名为flipped的全局变量，如下所示：

var flipped = false;

然后让你的切换函数看起来像这样：

$("#rotateAll").click(function() {
    var cards = $(".card-container");
    cards.each(function(card) {
        if (flipped) {
            card.removeClass("hover");
        } else {
            card.addClass("hover"),
        }
    })
    flipped = !flipped;
})

这将在所有牌中添加或删除hover类，而不考虑单个翻转。

Answer 2

也许你可以选择所有的牌，并将你的逻辑应用于每一张牌。

 $("#rotateAll").click(function () {
  var cards = $('.card-container');
  $.each(cards, function (i, card) {
    if (card.hasClass('hover')) {
      card.removeClass('hover');
    } else {
      card.addClass('hover');
    }
  })
})