Revert flipping a DIV after clicking another one

Deadly 提交于 2019-12-13 14:03:16

问题


Take a look a this link. If you click on a product it flips and shows some information. You can flip all products at a given time.

I want to be able to only have one flipped product. Every time someone clicks another product, I want the previous one to flip back to its original appearance.

The 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>

The 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");
    });
  }
})();

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

回答1:


Try to remove 'flipped' class on card on click.

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


来源:https://stackoverflow.com/questions/31022455/revert-flipping-a-div-after-clicking-another-one

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!