JS：如何让多张卡片在网站上翻转？

Question

嗨，我发现了这张卡片翻转动画https://codepen.io/desandro/pen/LmWozd，我决定为我的网站设计它的样式。我打算有一堆这样的卡片（字母表的每个字母一张）。但是，现在该代码不适用于一张以上的卡。我对 JavaScript 不太熟悉，所以我不知道为什么这段代码不起作用。我尝试了一些我在网上找到的方法，但它们似乎都不起作用，但它们也没有安静地适用于卡片翻转，所以我想这可能是问题的一部分。任何帮助表示赞赏！

这是我的代码：

var card = document.querySelector('.card');
card.addEventListener( 'click', function() {
  card.classList.toggle('is-flipped');
});

.scene {
    width: 120px;
    height: 100px;
    margin: 40px 0;
    perspective: 600px;
    border-radius: 25px;
  }
  
 .card {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transform-style: preserve-3d;
    transform-origin: center right;
    transition: transform 1s;
    border-radius: 25px;
  }
  
  .card.is-flipped {
    transform: translateX(-100%) rotateY(-180deg);
  }
  
  .card__face {
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 200%;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    backface-visibility: hidden;
    border-radius: 25px;
  }
  
  .card__face--front {
    background: #C1C6C4;
  }
  
  .card__face--back {
        background-size: contain;
        background-repeat: no-repeat;
    transform: rotateY(180deg);
  }

<div class="scene scene--card">
          <div class="card" id="card-1">
            <div class="card__face card__face--front" style="background: #FFA894 !important;">A</div>
            <div class="card__face card__face--back" style="background-color: red"></div>
          </div>
        </div>
        <div class="scene scene--card">
          <div class="card" id="card-2">
            <div class="card__face card__face--front" style="background: #FFA894 !important;">A</div>
            <div class="card__face card__face--back" style="background-color: red">
             </div>
             <!-- color is a placeholder -->
            
          </div>
        </div>

Answer 1

使用querySelectorAll 和一个循环。 querySelector 按层次顺序返回第一个元素。 querySelectorAll 返回一个选定元素的数组

var cards = document.querySelectorAll('.card');
for(let i = 0; i < cards.length; i++){
  cards[i].addEventListener( 'click', function() {
  cards[i].classList.toggle('is-flipped');
});
}

.scene {
    width: 120px;
    height: 100px;
    margin: 40px 0;
    perspective: 600px;
    border-radius: 25px;
  }
  
 .card {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transform-style: preserve-3d;
    transform-origin: center right;
    transition: transform 1s;
    border-radius: 25px;
  }
  
  .card.is-flipped {
    transform: translateX(-100%) rotateY(-180deg);
  }
  
  .card__face {
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 200%;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    backface-visibility: hidden;
    border-radius: 25px;
  }
  
  .card__face--front {
    background: #C1C6C4;
  }
  
  .card__face--back {
        background-size: contain;
        background-repeat: no-repeat;
    transform: rotateY(180deg);
  }

<div class="scene scene--card">
          <div class="card" id="card-1">
            <div class="card__face card__face--front" style="background: #FFA894 !important;">A</div>
            <div class="card__face card__face--back" style="background-color: red"></div>
          </div>
        </div>
        <div class="scene scene--card">
          <div class="card" id="card-2">
            <div class="card__face card__face--front" style="background: #FFA894 !important;">A</div>
            <div class="card__face card__face--back" style="background-color: red">
             </div>
             <!-- color is a placeholder -->
            
          </div>
        </div>