Jquery 翻转卡故障排除

Question

我正在尝试使用 HTML 和 CSS 创建多个翻转卡，使用 jQuery 进行翻转。我遇到的问题是目前我只能翻转第一张牌。

任何使 jQuery 更加全球化并能够单击/翻转每张卡片的建议将不胜感激。

这是我一直在使用的示例：https ://codepen.io/marcwilk/pen/JjdwKZR

HTML：

<div class="scene scene--card">

  <div class="card">

    <div class="card__face card__face--front">front</div>

    <div class="card__face card__face--back">back</div>

  </div>

</div>

<div class="scene scene--card">

  <div class="card">

    <div class="card__face card__face--front">front</div>

    <div class="card__face card__face--back">back</div>

  </div>

</div>

<p>Click card to flip.</p>

CSS：

body { font-family: sans-serif; }

.scene {

  width: 200px;

  height: 260px;

  border: 1px solid #CCC;

  margin: 40px 0;

  perspective: 600px;

}

.card {

  position: relative;

  width: 100%;

  height: 100%;

  cursor: pointer;

  transform-style: preserve-3d;

  transform-origin: center right;

  transition: transform 1s;

}

.card.is-flipped {

  transform: translateX(-100%) rotateY(-180deg);

}

.card__face {

  position: absolute;

  width: 100%;

  height: 100%;

  line-height: 260px;

  color: white;

  text-align: center;

  font-weight: bold;

  font-size: 40px;

  backface-visibility: hidden;

}

.card__face--front {

  background: red;

}

.card__face--back {

  background: blue;

  transform: rotateY(180deg);

}

JS：

var card = document.querySelector('.card');

card.addEventListener( 'click', function() {

  card.classList.toggle('is-flipped');

});

谢谢！

Answer 1

首先，您的代码是纯 JavaScript，而不是使用 jQuery。其次，问题是您使用document.querySelector('.card')which 选择第一个.card元素。您的解决方案是使用document.querySelectorAll('.card');并循环通过它来添加点击事件侦听器：var cards = document.querySelectorAll('.card');cards.forEach(card => {&nbsp; card.addEventListener('click', function() {&nbsp; &nbsp; card.classList.toggle('is-flipped');&nbsp; })})body {&nbsp; font-family: sans-serif;}.scene {&nbsp; width: 200px;&nbsp; height: 260px;&nbsp; border: 1px solid #CCC;&nbsp; margin: 40px 0;&nbsp; perspective: 600px;}.card {&nbsp; position: relative;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; cursor: pointer;&nbsp; transform-style: preserve-3d;&nbsp; transform-origin: center right;&nbsp; transition: transform 1s;}.card.is-flipped {&nbsp; transform: translateX(-100%) rotateY(-180deg);}.card__face {&nbsp; position: absolute;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; line-height: 260px;&nbsp; color: white;&nbsp; text-align: center;&nbsp; font-weight: bold;&nbsp; font-size: 40px;&nbsp; backface-visibility: hidden;}.card__face--front {&nbsp; background: red;}.card__face--back {&nbsp; background: blue;&nbsp; transform: rotateY(180deg);}<div class="scene scene--card">&nbsp; <div class="card">&nbsp; &nbsp; <div class="card__face card__face--front">front</div>&nbsp; &nbsp; <div class="card__face card__face--back">back</div>&nbsp; </div></div><div class="scene scene--card">&nbsp; <div class="card">&nbsp; &nbsp; <div class="card__face card__face--front">front</div>&nbsp; &nbsp; <div class="card__face card__face--back">back</div>&nbsp; </div></div><p>Click card to flip.</p>