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

Question

嗨所以我发现这张卡片翻转 animation 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>