为什么只有一张卡片会翻转? [重复]

我不明白为什么第一张卡片在翻转而第二张卡片却没有。我所做的就是复制html。谢谢您的帮助。我是javascript新手。它适用于第一个卡,但不适用于第二个卡。

<div class="flipCard"> 
  <div class="card"> 
    <div class="side front"><img src="img/back100.png"></div> 
    <div class="side back"><img src="img/lion.png"></div> 
  </div> 
</div>

<div class="flipCard"> 
  <div class="card"> 
    <div class="side front"><img src="img/back100.png"></div> 
    <div class="side back"><img src="img/lion.png"></div> 
  </div> 
</div>

的CSS

 .flipCard {
      -webkit-perspective: 800;
      -ms-perspective: 800;
      -moz-perspective: 800;
      -o-perspective: 800;
       width: 100px;
       height: 100px;
       position: relative;
    }
    .flipCard .card.flipped {
      transform:rotatey(-180deg);
    }
    .flipCard .card {
      width: 100%;
      height: 100%;
      -webkit-transform-style: preserve-3d;
      -webkit-transition: 0.5s;
      -moz-transform-style: preserve-3d;
      -moz-transition: 0.5s;
      -ms-transform-style: preserve-3d;
      -ms-transition: 0.5s;
      -o-transform-style: preserve-3d;
      -o-transition: 0.5s;
      transform-style: preserve-3d;
      transition: 0.5s;
    }
    .flipCard .card .side {
      width: 100%;
      height: 100%;
      cursor: pointer;
      position: absolute;
      box-sizing: border-box;
      z-index: 2;
      backface-visibility: hidden;  /* W3C */
      box-shadow: 0 0 10px rgba(0,0,0,0.6);
    }
    .flipCard .card .back {

      transform:rotatey(-180deg);

    }

JS

var cardToFlip = document.querySelector(".card");
cardToFlip.addEventListener("click", toggleToFlip);

function toggleToFlip() {
    this.classList.toggle("flipped");
}

这让我写了更多随机的单词来提交。这是更多随机词。

评论
  • funde
    funde 回复

    document.querySelector(".card") only selects the first match. Use document.querySelectorAll(".card"); and then forEach over those:

    document.querySelectorAll(".card").forEach( card => card.addEventListener('click', toggleToFlip) );