javascript - 没有类的 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 类，而不管单独的翻转。