我如何解决我关于 javascript 中的翻转卡片的问题? [英] How can I resolve my problem about flip cards in javascript?

问题描述

我的 Javascript 代码有问题.我想通过单击一个按钮(在我的例子中，该按钮称为结果")来翻转我的卡片.但我的问题是当我点击第一个按钮结果"时，所有卡片都会翻转.所以我尝试了两个foreach，但是没有用.

这是我的代码:

const card = document.querySelectorAll(".cards__single");const resultsButton = document.querySelectorAll ("results-button");const backButton = document.querySelectorAll ("back-button");card.forEach((card) => {resultsButton.addEventListener("点击", () => {card.classList.add('do-flip');});backButton.addEventListener("click", () => {card.classList.remove('do-flip');});});

p {行高:24px；margin-block-start: 1em;margin-block-end: 1em;}.tournaments-section {显示:弹性；flex-wrap: 包裹;对齐内容:居中；}.tournaments-section .tournament {弹性:33.333%；最大宽度:33.3333%；}.cards {显示:弹性；弹性方向:行；justify-content: 空间环绕；对齐内容:居中；位置:相对；视角:1000px；对齐项目:拉伸；}.tournaments-section .cards {填充:0 15px；}.cards__single {宽度:100%；边框半径:5px；box-shadow: 0 5px 18px rgb(0 0 0/60%);光标:指针；文本对齐:居中；-webkit-transition:转换 .6s；变换风格:preserve-3d；过渡:.5s；-webkit-transition: .5s;位置:相对；转换:转换 0.6s；-webkit-transition:转换 .6s；背景颜色:rgba(27,40,56,.95)；显示:块；底边距:24px；边框:1px 实心 #41485a;}.cards__front, .cards__back {-webkit-backface-visibility:隐藏；背面可见性:隐藏；显示:弹性；弹性方向:列；}.cards__front {高度:100%；变换:旋转X(0度)；-webkit-transform:rotateX(0deg);}.cards__front>.cards__front__header {位置:相对；高度:100%；最大高度:250px；最小高度:250px；溢出:隐藏；背景色:#373f50；}.cards__front>.cards__front__body {填充:8px 16px；位置:相对；边框顶部:1px 实心 #41485a；}.cards__front>.cards__front__footer {填充:8px 16px；显示:弹性；justify-content: 空间环绕；}.pfl 按钮 {背景:无；边框:0；box-sizing: 边框框；填充:1em；框阴影:插入 0 0 0 2px #ffffff；背景颜色:rgba(255, 255, 255, 0.2);颜色:#ffffff；字体大小:继承；字体粗细:700；位置:相对；垂直对齐:中间；文本转换:大写；}.pfl-button::before, .pfl-button::after {box-sizing:继承；内容: "";位置:绝对；宽度:100%；高度:100%；}.画 {过渡:彩色0.25s；}.draw::before, .draw::after {边框:2px 实心透明；宽度:0；高度:0；}.draw::before {顶部:0；左:0；}.meet::after {顶部:0；左:0；}.cards__single .pfl-button {填充:1em；背景颜色:rgba(255, 255, 255, 0.2);}.cards__back {变换:旋转Y(180度)；-webkit-transform:rotateY(180deg);位置:绝对；文本对齐:居中；右:0；左:0；顶部:10px；}.cards__results {显示:弹性；justify-content: 空间环绕；底边距:15px；文本转换:大写；}.do-翻转{-o-变换:旋转Y(-180度)；-webkit-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);变换:旋转Y(-180度)；}

<div class="锦标赛"><div class="cards"><div class="cards__single"><div class="cards__front"><div class="cards__front__header"><div class="图像"><img class="cards__image" src="https://media-exp3.licdn.com/dms/image/C4D1BAQGJH3oVZgtvJA/company-background_10000/0/1569871136613?e=2159024400&v=1Osw1FWRgsw=1Osw1FWLgsv=1Osw1FWLgs1&s="PFL - 06/06/21 - 龙珠斗士">
<div class="cover"><h3 class="text" tabindex="0">标题 1</h3>

<div class="cards__front__body">你好世界 1

<div class="cards__front__footer"><button id="flip-card-btn-turn-to-back" class="pfl-button draw meet results-button">Results</button><a href="#" target="_blank" class="pfl-button draw meet">按钮 2</a><a href="#" target="_blank" class="pfl-button draw meet">按钮3</a>

<div class="cards__back"><div class="cards__results"><div class="cards__top"><h3>标题</h3>