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>