Jquery 翻转卡故障排除

Question

我正在尝试使用 HTML 和 CSS 创建多个翻转卡，使用 jQuery 进行翻转。我遇到的问题是目前我只能翻转第一张牌。任何使 jQuery 更加全球化并能够单击/翻转每张卡片的建议将不胜感激。这是我一直在使用的示例：https ://codepen.io/marcwilk/pen/JjdwKZRHTML：<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 => {

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

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

  })

})

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

}

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