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和循环。CCD_ 2按层次顺序返回第一个元素。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>