点击另一个DIV后恢复翻转DIV

Question

看看这个链接。如果你点击一个产品，它会翻转并显示一些信息。您可以同时翻转所有产品。

我希望只有一个产品被翻转。每次有人点击另一个产品时，我希望前一个产品翻回到其原始外观。

HTML代码：

<div class="card effect__EFFECT">
  <div class="card__front">
    <span class="card__text">front</span>
  </div>
  <div class="card__back">
    <span class="card__text">back</span>
  </div>
</div>

Javascript：

(function() {
  var cards = document.querySelectorAll(".card.effect__click");
  for ( var i  = 0, len = cards.length; i < len; i++ ) {
    var card = cards[i];
    clickListener( card );
  }

  function clickListener(card) {
    card.addEventListener( "click", function() {
      var c = this.classList;
      c.contains("flipped") === true ? c.remove("flipped") : c.add("flipped");
    });
  }
})();

CSS代码如下：

.card.effect__click.flipped .card__front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card.effect__click.flipped .card__back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}

- dominotrix

---

首先从所有卡片中删除翻转类，如果有任何卡片包含该类，则运行您当前的函数。在变量C之前，在clickListener()函数中编写此事件。 - Sawan Dhanotiya

Answer 1

尝试在单击时删除卡片上的“flipped”类。

      function clickListener(card) {
           card.addEventListener( "click", function() {
               $('.card.effect__click').removeClass('flipped');
               var c = this.classList;
               c.contains("flipped") === true ? c.remove("flipped") : c.add("flipped");
           });
      }

- DDan

---

太好了！它起作用了。不过我必须将你的$更改为jQuery。但是感谢您的快速修复和回应。 :D - dominotrix