Блог

У меня есть простой веб-сайт портфолио с тремя откидными карточками. На данный момент функциональность флипа есть, и я в основном закончил с веб-сайтом. Дело в том, что я хочу, чтобы другие карты переключались при нажатии на одну карту. Другими словами, я хочу, чтобы за раз переворачивалась только одна карта. Как я могу сделать так, чтобы это произошло?

index.html:

 lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt;  lt;meta charset="UTF-8"gt;  lt;meta http-equiv="X-UA-Compatible" content="IE=edge"gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt;  lt;titlegt;hayden dyerlt;/titlegt;  lt;link rel="stylesheet" href="./style.css"gt;  lt;link rel="preconnect" href="https://fonts.googleapis.com"gt;  lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigingt;  lt;link href="https://fonts.googleapis.com/css2?family=Poppinsamp;display=swap" rel="stylesheet"gt; lt;/headgt; lt;bodygt;  lt;div class="card"gt;  lt;div class="card__inner"gt;  lt;div class="card__face card__face--front about"gt;  lt;h2gt;About Melt;/h2gt;  lt;/divgt;  lt;div class="card__face card__face--back"gt;  lt;div class="card__content"gt;  lt;div class="card__header"gt;  lt;img src="./haydendyer080421bw.jpg" alt="my face" class="pic" /gt;  lt;h2gt;Hi there! I'm Hayden Dyer.lt;/h2gt;  lt;/divgt;  lt;div class="card__body"gt;  lt;pgt;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?lt;/pgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="card"gt;  lt;div class="card__inner"gt;  lt;div class="card__face card__face--front projects"gt;  lt;h2gt;My Projectslt;/h2gt;  lt;/divgt;  lt;div class="card__face card__face--back"gt;  lt;div class="card__content"gt;  lt;div class="card__body"gt;  lt;pgt;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?lt;/pgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="card"gt;  lt;div class="card__inner"gt;  lt;div class="card__face card__face--front contact"gt;  lt;h2gt;Contactlt;/h2gt;  lt;/divgt;  lt;div class="card__face card__face--back"gt;  lt;div class="card__content"gt;  lt;div class="card__body"gt;  lt;h3gt;lt;a href="mailto: hcdyer0@gmail.com" target="_blank" rel="noopener noreferrer"gt;emaillt;/agt;lt;/h3gt;  lt;h3gt;lt;a href="https://www.linkedin.com/in/hayden-dyer/" target="_blank" rel="noopener noreferrer"gt;linkedinlt;/agt;lt;/h3gt;  lt;h3gt;lt;a href="https://github.com/HaydenDyer" target="_blank" rel="noopener noreferrer"gt;githublt;/agt;lt;/h3gt;  lt;h3gt;lt;a href="https://twitter.com/haydenDyer_" target="_blank" rel="noopener noreferrer"gt;twitterlt;/agt;lt;/h3gt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;script src="./script.js"gt;lt;/scriptgt; lt;/bodygt; lt;/htmlgt;  

script.js:

 const cards = document.querySelectorAll(".card__inner");  function flipCard() {  this.classList.toggle('is-flipped'); };  cards.forEach((card) =gt;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) =gt; {  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) =gt; {  if(card != this) {  card.classList.remove('is-flipped');  }  });    this.classList.toggle('is-flipped'); };  cards.forEach((card) =gt;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; } 

 lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt;  lt;meta charset="UTF-8"gt;  lt;meta http-equiv="X-UA-Compatible" content="IE=edge"gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt;  lt;titlegt;hayden dyerlt;/titlegt;  lt;link rel="stylesheet" href="./style.css"gt;  lt;link rel="preconnect" href="https://fonts.googleapis.com"gt;  lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigingt;  lt;link href="https://fonts.googleapis.com/css2?family=Poppinsamp;display=swap" rel="stylesheet"gt; lt;/headgt; lt;bodygt;  lt;div class="card"gt;  lt;div class="card__inner"gt;  lt;div class="card__face card__face--front about"gt;  lt;h2gt;About Melt;/h2gt;  lt;/divgt;  lt;div class="card__face card__face--back"gt;  lt;div class="card__content"gt;  lt;div class="card__header"gt;  lt;img src="./haydendyer080421bw.jpg" alt="my face" class="pic" /gt;  lt;h2gt;Hi there! I'm Hayden Dyer.lt;/h2gt;  lt;/divgt;  lt;div class="card__body"gt;  lt;pgt;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?lt;/pgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="card"gt;  lt;div class="card__inner"gt;  lt;div class="card__face card__face--front projects"gt;  lt;h2gt;My Projectslt;/h2gt;  lt;/divgt;  lt;div class="card__face card__face--back"gt;  lt;div class="card__content"gt;  lt;div class="card__body"gt;  lt;pgt;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?lt;/pgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="card"gt;  lt;div class="card__inner"gt;  lt;div class="card__face card__face--front contact"gt;  lt;h2gt;Contactlt;/h2gt;  lt;/divgt;  lt;div class="card__face card__face--back"gt;  lt;div class="card__content"gt;  lt;div class="card__body"gt;  lt;h3gt;lt;a href="mailto: hcdyer0@gmail.com" target="_blank" rel="noopener noreferrer"gt;emaillt;/agt;lt;/h3gt;  lt;h3gt;lt;a href="https://www.linkedin.com/in/hayden-dyer/" target="_blank" rel="noopener noreferrer"gt;linkedinlt;/agt;lt;/h3gt;  lt;h3gt;lt;a href="https://github.com/HaydenDyer" target="_blank" rel="noopener noreferrer"gt;githublt;/agt;lt;/h3gt;  lt;h3gt;lt;a href="https://twitter.com/haydenDyer_" target="_blank" rel="noopener noreferrer"gt;twitterlt;/agt;lt;/h3gt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;script src="./script.js"gt;lt;/scriptgt; lt;/bodygt; lt;/htmlgt; script.js: 

Это просто, если карта перевернута-откиньте ее и переверните карту так, как вы хотели

Ваш сценарий должен выглядеть так

 const cards = document.querySelectorAll(".card__inner");  function flipCard() {  for(let i = 0; i lt; cards.length; i  ) {   if(cards[i].classList.contains('is-flipped')) cards[i].classList.remove('is-flipped')   }  this.classList.toggle('is-flipped'); };  cards.forEach((card) =gt;card.addEventListener("click", flipCard));