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>

SCRIPT

(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() {
           jQuery('.card.effect__click').removeClass('flipped');
           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);
}

提前致谢！

Answer 1

你几乎是对的。问题是你删除它然后再点击它。

jQuery('.card.effect__click').removeClass('flipped'); //this removes the class
var c = this.classList;
c.contains("flipped") === true ? c.remove("flipped") : c.add("flipped"); //this adds it back

试试这个

var alreadyFlipped = $(this).hasClass('flipped');
jQuery('.item').removeClass('flipped'); //flip back all
if (!alreadyFlipped){
    $(this).addClass('flipped'); //flip this one if it needs to
}

DEMO

Answer 2

由于您已经在使用jQuery，因此可以更简单地实现相同的效果：

$(".card.effect__click").click(function() {
    if ($(this).hasClass("flipped")) $(this).removeClass("flipped")
    else $(this).addClass("flipped").siblings().removeClass("flipped")
})

$.click是jQuery等同于点击监听器，$.siblings()返回同一容器内的其他div。函数可以链接在一起，因为许多jQuery函数返回它被调用的元素。

Working example

Answer 3

万一有人遇到同样的问题，正确的代码是：

<script>
jQuery('.card.effect__click').click(function() {

if (jQuery(this).hasClass('flipped')){
jQuery(this).removeClass('flipped');
}
else {jQuery(this).addClass('flipped');}

if (jQuery('.card.effect__click').hasClass('flipped')){
var cards = document.querySelectorAll(".card.effect__click");
  for ( var i  = 0, len = cards.length; i < len; i++ ) {
    jQuery('.card.effect__click').removeClass('flipped');
  }
jQuery(this).addClass('flipped');
}

})
</script>

单击其他位置时，还原翻转div的效果

3 个答案: