恢复点击其他地方时翻转 div 的效果答案

【问题标题】：Revert the effect of flipping a div when clicking elsewhere恢复点击其他地方时翻转 div 的效果
【发布时间】：2015-07-07 20:13:19
【问题描述】：

我有这个website。

当您单击产品时，它会翻转并显示说明。如果您单击另一个产品，那么您单击的第一个产品将被翻转，新产品也会翻转。到目前为止一切顺利。

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

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>

脚本

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

提前致谢！

【问题讨论】：

是的，请添加您的代码。
刚刚做了。看看这个，如果有帮助的话：stackoverflow.com/questions/31022455/…

标签： javascript html css

【解决方案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

【讨论】：

那是因为我希望在我点击另一个产品时将其删除。正确的代码是什么？
你有 Codepen 链接吗？它根本不起作用。没有 div 被翻转。
废话，有错字。更新 + 小提琴

【解决方案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

【讨论】：

这是一个很好的解决方案，但是如果在这种情况下添加更多类/场景，siblings() 可能会有奇怪的行为并且可能无法工作。
不幸的是我不能使用上面的代码。我必须坚持原来的结构。我粘贴的代码是否可以实现这一点？
@Stoyan Dekov 你能举个例子吗？我以前没有听说过。您可以通过首先从容器内拥有它的所有元素中删除 flipped 类，然后将其添加到点击事件目标来解决此问题。
@dominotrix Soyan Dekov 的回答在这种情况下应该适合你。
如果你看一下他的代码，有问题的 div 不是兄弟姐妹而是堂兄弟，因为它们都有一个父级 (
)。我的观点是这高度依赖于 DOM 结构并且很容易导致回归问题。

【解决方案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>

【讨论】：