时间戳

首页 > 解决方案 > 如何在点击时翻转 DIV，并在彼此之间进行交互（一个翻转打开，另一个关闭）？

javascript - 如何在点击时翻转 DIV，并在彼此之间进行交互（一个翻转打开，另一个关闭）？

问题描述

我是 Web 开发的新手，我通过这项任务挑战自己以掌握 JavaScript。我的任务是使页面上的不同 div 在单击时可翻转并根据当前状态相互交互。

我想再学习两件事：

  1. 缩短/简化当前的 JS 代码（如果可能）
  2. 让 div 相互交互：当“单击”时，当前一个会打开，但如果它们中的任何一个已经打开，它将关闭。所以一次只有一个 div 保持打开状态。

我当前的代码（codepen：https ://codepen.io/Loomeus/pen/RwKELbx ）：

HTML

var card = document.querySelector('.card');
card.addEventListener( 'click', function() {
  card.classList.toggle('is-flipped');
});

var card2 = document.querySelector('.card2');
card2.addEventListener( 'click', function() {
  card2.classList.toggle('is-flipped');
});

var card3 = document.querySelector('.card3');
card3.addEventListener( 'click', function() {
  card3.classList.toggle('is-flipped');
});
@media screen and (min-width:650px){
  .flipping {display: flex;
      justify-content:space-between;
  }
}

.scene, .scene2, .scene3 {
  width: 200px;
  height: 200px;
  perspective: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.card, .card2, .card3 {
  width: 200px;
  height: 200px;
  position: relative;
  transition: transform 1.5s;
  transform-style: preserve-3d;
}

.card__face, .card__face2, .card__face3 {
  position: absolute;
  width: 200px;
  height: 200px;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.card__face--front, .card__face--front2, .card__face--front3 {
  background: red;
}

.card__face--back, .card__face--back2, .card__face--back3 {
  background: blue;
  transform: rotateY( 180deg );
}

.card.is-flipped, .card2.is-flipped, .card3.is-flipped {
  transform: rotateY(180deg);
}
<!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">

    <script defer src="/script.js"></script>
    <link rel="stylesheet" href="style.css">

    <title>Document</title>
</head>
<body>
    <section class="flipping">
        <div class="scene">
          <div class="card">
            <div class="card__face card__face--front">Front of first div</div>
            <div class="card__face card__face--back">Back of first div</div>
          </div>
        </div>
        <br>
        
        <div class="scene2">
          <div class="card2">
            <div class="card__face2 card__face--front2">Front of second div</div>
            <div class="card__face2 card__face--back2">Back of second div</div>
          </div>
        </div>        
        <br>
        
        <div class="scene3">
          <div class="card3">
            <div class="card__face3 card__face--front3">Front of last div</div>
            <div class="card__face3 card__face--back3">Back of last div</div>
          </div>
        </div>          
    </section
    
</body>
</html>

你能帮帮我吗？

谢谢！

标签： javascript

解决方案

card您可以通过在所有卡片上使用公共类来简化代码。然后，您需要is-flipped在翻转点击的卡片之前从所有卡片中删除该类：

var cards = document.querySelectorAll('.card');

cards.forEach(function (card) {
  card.addEventListener('click', function () {
     // Remove the class on all, toggle the clicked one
     cards.forEach(function (c) {
       if (c !== card) c.classList.remove('is-flipped');
       else c.classList.toggle('is-flipped');
     });
  });
});

固定 CodePen

堆栈片段：

var cards = document.querySelectorAll('.card');

cards.forEach(function (card) {
  card.addEventListener('click', function () {
     // Remove the class on all, except the clicked one
     cards.forEach(function (c) {
       if (c !== card) c.classList.remove('is-flipped');
       else c.classList.toggle('is-flipped');
     });
  });
});
@media screen and (min-width:400px){
  .flipping {display: flex;
      justify-content:space-between;
  }
}

.scene, .scene2, .scene3 {
  width: 100px;
  height: 100px;
  perspective: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.card {
  width: 100px;
  height: 100px;
  position: relative;
  transition: transform 1.5s;
  transform-style: preserve-3d;
}

.card__face, .card__face2, .card__face3 {
  position: absolute;
  width: 100px;
  height: 100px;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.card__face--front, .card__face--front2, .card__face--front3 {
  background: red;
}

.card__face--back, .card__face--back2, .card__face--back3 {
  background: blue;
  transform: rotateY( 180deg );
}

.card.is-flipped, .card2.is-flipped, .card3.is-flipped {
  transform: rotateY(180deg);
}
<!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">

    <script defer src="/script.js"></script>
    <link rel="stylesheet" href="style.css">

    <title>Document</title>
</head>
<body>
    <section class="flipping">
        <div class="scene">
          <div class="card">
            <div class="card__face card__face--front">Front of first div</div>
            <div class="card__face card__face--back">Back of first div</div>
          </div>
        </div>
        <br>
        
        <div class="scene2">
          <div class="card">
            <div class="card__face2 card__face--front2">Front of second div</div>
            <div class="card__face2 card__face--back2">Back of second div</div>
          </div>
        </div>        
        <br>
        
        <div class="scene3">
          <div class="card">
            <div class="card__face3 card__face--front3">Front of last div</div>
            <div class="card__face3 card__face--back3">Back of last div</div>
          </div>
        </div>          
    </section
    
</body>
</html>

推荐阅读