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

不含类的jQuery翻转容器

2 个答案: