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')來選擇第一個.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>