我有一个简单的投资组合网站，里面有三张卡片。到目前为止，翻转功能已经存在，我基本上已经完成了网站的工作。问题是，我希望其他卡片在点击一张卡片时切换。换句话说，我希望一次只翻转一张卡片。我怎样才能做到这一点？
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hayden dyer</title>
<link rel="stylesheet" href="./style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<div class="card">
<div class="card__inner">
<div class="card__face card__face--front about">
<h2>About Me</h2>
</div>
<div class="card__face card__face--back">
<div class="card__content">
<div class="card__header">
<img src="./haydendyer080421bw.jpg" alt="my face" class="pic" />
<h2>Hi there! I'm Hayden Dyer.</h2>
</div>
<div class="card__body">
<p>lorem ipsum dolor sit amet consectetur adipisicing elit. iure, aperiam eaque. quasi architecto illum reiciendis fuga ipsam distinctio quis. molestias rem harum, tempora quos pariatur dignissimos aperiam vitae amet esse?</p>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card__inner">
<div class="card__face card__face--front projects">
<h2>My Projects</h2>
</div>
<div class="card__face card__face--back">
<div class="card__content">
<div class="card__body">
<p>lorem ipsum dolor sit amet consectetur adipisicing elit. iure, aperiam eaque. quasi architecto illum reiciendis fuga ipsam distinctio quis. molestias rem harum, tempora quos pariatur dignissimos aperiam vitae amet esse?</p>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card__inner">
<div class="card__face card__face--front contact">
<h2>Contact</h2>
</div>
<div class="card__face card__face--back">
<div class="card__content">
<div class="card__body">
<h3><a href="mailto: hcdyer0@gmail.com" target="_blank" rel="noopener noreferrer">email</a></h3>
<h3><a href="https://www.linkedin.com/in/hayden-dyer/" target="_blank" rel="noopener noreferrer">linkedin</a></h3>
<h3><a href="https://github.com/HaydenDyer" target="_blank" rel="noopener noreferrer">github</a></h3>
<h3><a href="https://twitter.com/haydenDyer_" target="_blank" rel="noopener noreferrer">twitter</a></h3>
</div>
</div>
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
script.js:
const cards = document.querySelectorAll(".card__inner");
function flipCard() {
this.classList.toggle('is-flipped');
};
cards.forEach((card) =>card.addEventListener("click", flipCard));
style.css:
:root {
--dark: #312b2b;
--light: #F5EFEB;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: var(--light);
font-family: 'Poppins', sans-serif;
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: row;
}
.card {
width: calc(100% / 3);
height: 100vh;
perspective: 800px;
}
.card__inner {
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
position: relative;
}
.card__inner.is-flipped {
transform: rotateY(180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
}
.card__face--front {
display: flex;
align-items: center;
justify-content: center;
}
.about {
background-color: #05668D;
}
.projects {
background-color: #028090;
}
.contact {
background-color: #00A393;
}
.card__face--front h2 {
color: var(--light);
font-size: 64px;
}
.card__face--back {
background-color: var(--light);
transform: rotateY(180deg);
display: flex;
align-items: center;
}
.pic {
display: block;
width: 192px;
height: 192px;
margin: 32px auto;
object-fit: cover;
}
.card__header h2 {
color: var(--dark);
font-size: 24px;
text-align: center;
}
.card__body {
padding: 32px;
}
.card__body h3 {
color: var(--dark);
font-size: 32px;
}
.card__body p {
color: var(--dark);
font-size: 16px;
line-height: 2;
}
a {
text-decoration: none;
color: var(--dark)
}
a:hover {
text-decoration: underline;
}
一种方法如下：当一张卡被点击时，"解开"；所有其他卡片，然后切换单击的卡片的翻转状态。
function flipCard() {
// "unflip" all cards other than the one clicked
cards.forEach((card) => {
if(card != this) {
card.classList.remove('is-flipped');
}
});
this.classList.toggle('is-flipped');
};
演示片段：
const cards = document.querySelectorAll(".card__inner");
function flipCard() {
// "unflip" all cards other than the one clicked
cards.forEach((card) => {
if(card != this) {
card.classList.remove('is-flipped');
}
});
this.classList.toggle('is-flipped');
};
cards.forEach((card) =>card.addEventListener("click", flipCard));:root {
--dark: #312b2b;
--light: #F5EFEB;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: var(--light);
font-family: 'Poppins', sans-serif;
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: row;
}
.card {
width: calc(100% / 3);
height: 100vh;
perspective: 800px;
}
.card__inner {
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
position: relative;
}
.card__inner.is-flipped {
transform: rotateY(180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
}
.card__face--front {
display: flex;
align-items: center;
justify-content: center;
}
.about {
background-color: #05668D;
}
.projects {
background-color: #028090;
}
.contact {
background-color: #00A393;
}
.card__face--front h2 {
color: var(--light);
font-size: 64px;
}
.card__face--back {
background-color: var(--light);
transform: rotateY(180deg);
display: flex;
align-items: center;
}
.pic {
display: block;
width: 192px;
height: 192px;
margin: 32px auto;
object-fit: cover;
}
.card__header h2 {
color: var(--dark);
font-size: 24px;
text-align: center;
}
.card__body {
padding: 32px;
}
.card__body h3 {
color: var(--dark);
font-size: 32px;
}
.card__body p {
color: var(--dark);
font-size: 16px;
line-height: 2;
}
a {
text-decoration: none;
color: var(--dark)
}
a:hover {
text-decoration: underline;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hayden dyer</title>
<link rel="stylesheet" href="./style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<div class="card">
<div class="card__inner">
<div class="card__face card__face--front about">
<h2>About Me</h2>
</div>
<div class="card__face card__face--back">
<div class="card__content">
<div class="card__header">
<img src="./haydendyer080421bw.jpg" alt="my face" class="pic" />
<h2>Hi there! I'm Hayden Dyer.</h2>
</div>
<div class="card__body">
<p>lorem ipsum dolor sit amet consectetur adipisicing elit. iure, aperiam eaque. quasi architecto illum reiciendis fuga ipsam distinctio quis. molestias rem harum, tempora quos pariatur dignissimos aperiam vitae amet esse?</p>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card__inner">
<div class="card__face card__face--front projects">
<h2>My Projects</h2>
</div>
<div class="card__face card__face--back">
<div class="card__content">
<div class="card__body">
<p>lorem ipsum dolor sit amet consectetur adipisicing elit. iure, aperiam eaque. quasi architecto illum reiciendis fuga ipsam distinctio quis. molestias rem harum, tempora quos pariatur dignissimos aperiam vitae amet esse?</p>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card__inner">
<div class="card__face card__face--front contact">
<h2>Contact</h2>
</div>
<div class="card__face card__face--back">
<div class="card__content">
<div class="card__body">
<h3><a href="mailto: hcdyer0@gmail.com" target="_blank" rel="noopener noreferrer">email</a></h3>
<h3><a href="https://www.linkedin.com/in/hayden-dyer/" target="_blank" rel="noopener noreferrer">linkedin</a></h3>
<h3><a href="https://github.com/HaydenDyer" target="_blank" rel="noopener noreferrer">github</a></h3>
<h3><a href="https://twitter.com/haydenDyer_" target="_blank" rel="noopener noreferrer">twitter</a></h3>
</div>
</div>
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
script.js:这很容易，如果卡片被翻转，将其解开并翻转您想要的
你的脚本应该像这个
const cards = document.querySelectorAll(".card__inner");
function flipCard() {
for(let i = 0; i < cards.length; i++) {
if(cards[i].classList.contains('is-flipped')) cards[i].classList.remove('is-flipped')
}
this.classList.toggle('is-flipped');
};
cards.forEach((card) =>card.addEventListener("click", flipCard));