Question

我有一些代码，可以在单击卡后反转卡，而我的目标是在第一次单击卡后仅切换一次班级。这是HTML标记：

        // Turning images
var images = [];

(function() {
  generateCards();
})();

var cards = document.querySelectorAll(".card");

Array.from(cards).forEach(function(card) {
  card.addEventListener("click", function() {
    Array.from(card.querySelectorAll(".back, .front")).forEach(function(el) {
      ["back", "front"].forEach(function(s) {
        el.classList.toggle(s);
      });
    });
  });
});

var randInt = randomIntFromInterval(1, 3);

//Displaying different images on click
function cardImg(index) {
  var cardNewImg = randomIntFromInterval(2, 18);

  if (images[index] !== undefined) {
    images[index] = -1;
  }
  while (images.indexOf(cardNewImg) != -1) {
    cardNewImg = randomIntFromInterval(2, 18);
  }
  images[index] = cardNewImg;
  if (images.indexOf(2) == -1) {
    images[randInt - 1] = 2;
  }
}

function generateCards() {
  for (var i = 0; i < 3; i++) {
    cardImg(i);
  }
}

function getCard(index) {
  if (!images[index].valid) {
    cardImg(index);
  }
  document["randimg" + (index + 1)].src =
    "https://lp.rustaro.ru/wp-content/uploads/transformation/cards/" +
    images[index] +
    ".jpg";
}
function randomIntFromInterval(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

    body {
      font-family: sans-serif;
    }

    .hidden {
      display: none;
    }

    .wrap {
      position: absolute;
      width: 100%;
      height: 100vh;
      top: 0;
      left: 0;
      background: #A770EF;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to right, #FDB99B, #CF8BF3, #A770EF);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to right, #FDB99B, #CF8BF3, #A770EF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .card {
      width: 200px;
      height: 345px;
      position: relative;
      perspective: 1000px;
      cursor: pointer;
      margin: 0 50px;
    }

    .front, .back {
      width: 100%;
      height: 100%;
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: 1s;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      border-radius: 10px;
    }

    .front {
      transform: rotateY(360deg);
      -webkit-transform: rotateY(360deg);
    }

    .back  {
      transform: rotateY(180deg);
      -webkit-transform: rotateY(180deg);
    }

    .front:hover {
      transform: scale(1.1);
      -webkit-transform: scale(1.1);
      -webkit-box-shadow: 0px 0px 20px 5px rgba(255,255,255,1);
      -moz-box-shadow: 0px 0px 20px 5px rgba(255,255,255,1);
      box-shadow: 0px 0px 20px 5px rgba(255,255,255,1);
    }

    .img1 {
      width: 200px;
      border-radius: 10px;
      height: 345px;
    }

    <!DOCTYPE html>
    <html lang="en">

    <head>
      <meta charset="UTF-8">
      <title>Card</title>
      <link rel="stylesheet" href="main.css">
    </head>

    <body>
      <div class="wrap">
        <div class="card">
          <div class="front" onclick="getCard(0)"><img class="img1" src="https://lp.rustaro.ru/wp-content/uploads/transformation/cards/1.jpg" alt=""></div>
          <div class="back"><img class="img1" src="" name="randimg1"></div>
        </div>
        <div class="card">
          <div class="front" onclick="getCard(1)"><img class="img1" src="https://lp.rustaro.ru/wp-content/uploads/transformation/cards/1.jpg" alt=""></div>
          <div class="back"><img class="img1" src="" name="randimg2"></div>
        </div>
        <div class="card">
          <div class="front" onclick="getCard(2)"><img class="img1" src="https://lp.rustaro.ru/wp-content/uploads/transformation/cards/1.jpg" alt=""></div>
          <div class="back"><img class="img1" src="" name="randimg3"></div>
        </div>
      </div>
      <script src="main.js"></script>
    </body>
    </html>

我试图从函数中删除“前”类，但这没有帮助。也许我不确定可以使用CSS来解决问题。这是工作pen的链接。

Answer 1

将AddEventListener内部的函数更改为

my_function()

将完成工作。我刚刚添加了一个if条件gcloud app deploy

Answer 2

点击卡后，您要使用removeEventListener。

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

Array.from(cards).forEach(function (card) {
    card.addEventListener('click', flipCard);
});

function flipCard() {
    // Remove Event Listener from the clicked card
    this.removeEventListener('click', flipCard);
    Array.from(this.querySelectorAll(".back, .front")).forEach(function (el) {
        ["back", "front"].forEach(function (s) {
            el.classList.toggle(s);
        });
    });
}

我如何只一次切换js类

2 个答案: