如何让多个类在Javascript中侦听单击事件？

我有多张卡片，每次点击都要通过3D变换单独旋转（不是同时旋转）。但是，我似乎只能进行第一次翻转，而不能进行后续的翻转

var-card=document.querySelector（'.card'）；
card.addEventListener（'click'，function（）{
card.classList.toggle（'is-fliped'）；
});
body{font-family:sans-serif；}
.现场{
宽度：200px；
高度：260px；
边框：1px实心#CCC；
利润率：40px0；
透视图：600px；
}
.卡片{
宽度：100%；
身高：100%；
转变：转变1s；
变换样式：保留-3d；
光标：指针；
位置：相对位置；
}
.卡片翻了{
变换：旋转（180度）；
}
.card___面{
位置：绝对位置；
宽度：100%；
身高：100%；
线高：260px；
颜色：白色；
文本对齐：居中；
字体大小：粗体；
字体大小：40px；
背面可见性：隐藏；
}
.card___面-正面{
背景：红色；
}
.card___面–背面{
背景：蓝色；
变换：旋转（180度）；
}

前面
返回
前面
返回
问题在于您正在使用
document.querySelector（）
查询一张卡

您必须使用查询所有卡片

然后使用将事件处理程序附加到每个卡：


document.querySelectorAll（'.card'）.forEach（card=>{
card.addEventListener（'click'，（）=>{
card.classList.toggle（'is-fliped'）；
});
});
body{font-family:sans-serif；}
.现场{
宽度：200px；
高度：260px；
边框：1px实心#CCC；
利润率：40px0；
透视图：600px；
}
.卡片{
宽度：100%；
身高：100%；
转变：转变1s；
变换样式：保留-3d；
光标：指针；
位置：相对位置；
}
.卡片翻了{
变换：旋转（180度）；
}
.card___面{
位置：绝对位置；
宽度：100%；
身高：100%；
线高：260px；
颜色：白色；
文本对齐：居中；
字体大小：粗体；
字体大小：40px；
背面可见性：隐藏；
}
.card___面-正面{
背景：红色；
}
.card___面–背面{
背景：蓝色；
变换：旋转（180度）；
}

前面
返回
前面
返回
问题在于您正在使用
document.querySelector（）
查询一张卡

您必须使用查询所有卡片

然后使用将事件处理程序附加到每个卡：


document.querySelectorAll（'.card'）.forEach（card=>{
card.addEventListener（'click'，（）=>{
card.classList.toggle（'is-fliped'）；
});
});
body{font-family:sans-serif；}
.现场{
宽度：200px；
高度：260px；
边框：1px实心#CCC；
利润率：40px0；
透视图：600px；
}
.卡片{
宽度：100%；
身高：100%；
转变：转变1s；
变换样式：保留-3d；
光标：指针；
位置：相对位置；
}
.卡片翻了{
变换：旋转（180度）；
}
.card___面{
位置：绝对位置；
宽度：100%；
身高：100%；
线高：260px；
颜色：白色；
文本对齐：居中；
字体大小：粗体；
字体大小：40px；
背面可见性：隐藏；
}
.card___面-正面{
背景：红色；
}
.card___面–背面{
背景：蓝色；
变换：旋转（180度）；
}

前面
返回
前面
返回
您使用的是
document.querySelector（）
，它只返回类为
卡的第一个元素。
你应该使用
然后。在循环中添加事件侦听器


var cards=document.querySelectorAll（'.card'）；
Array.from（cards）.forEach（card=>{
card.addEventListener（'click'，function（）{
card.classList.toggle（'is-fliped'）；
});
})
body{font-family:sans-serif；}
.现场{
宽度：200px；
高度：260px；
边框：1px实心#CCC；
利润率：40px0；
透视图：600px；
}
.卡片{
宽度：100%；
身高：100%；
转变：转变1s；
变换样式：保留-3d；
光标：指针；
位置：相对位置；
}
.卡片翻了{
变换：旋转（180度）；
}
.card___面{
位置：绝对位置；
宽度：100%；
身高：100%；
线高：260px；
颜色：白色；
文本对齐：居中；
字体大小：粗体；
字体大小：40px；
背面可见性：隐藏；
}
.card___面-正面{
背景：红色；
}
.card___面–背面{
背景：蓝色；
变换：旋转（180度）；
}

前面
返回
前面
返回
您使用的是
document.querySelector（）
，它只返回类为
卡的第一个元素。
你应该使用
然后。在循环中添加事件侦听器


var cards=document.querySelectorAll（'.card'）；
Array.from（cards）.forEach（card=>{
card.addEventListener（'click'，function（）{
card.classList.toggle（'is-fliped'）；
});
})
body{font-family:sans-serif；}
.现场{
宽度：200px；
高度：260px；
边框：1px实心#CCC；
利润率：40px0；
透视图：600px；
}
.卡片{
宽度：100%；
身高：100%；
转变：转变1s；
变换样式：保留-3d；
光标：指针；
位置：相对位置；
}
.卡片翻了{
变换：旋转（180度）；
}
.card___面{
位置：绝对位置；
宽度：100%；
身高：100%；
线高：260px；
颜色：白色；
文本对齐：居中；
字体大小：粗体；
字体大小：40px；
背面可见性：隐藏；
}
.card___面-正面{
背景：红色；
}
.card___面–背面{
背景：蓝色；
变换：旋转（180度）；
}

前面
返回
前面
返回
您不能-您需要解析元素数组并将事件处理程序分配给每个元素。您不能-您需要解析元素数组并将事件处理程序分配给每个元素。