恢复单击其他位置时翻转div的效果

我有这个网站。

当你点击一个产品时，它会翻转并显示描述。如果你点击另一个产品，那么你点击的第一个产品就会被翻转，新的产品也会被翻转。到目前为止一切顺利。

我需要的是，如果你点击相同的产品，再次翻转到原始状态。

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

脚本

(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); }
提前感谢!

你几乎答对了。问题是你删除了它，然后在点击时又添加了它。

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 }
演示

由于您已经在使用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函数返回调用它的元素。
工作示例

以防有人有同样的问题，正确的代码是:

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

相关内容

最新更新

热门标签：