我如何只一次切換js類

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來解決問題。 這是工作筆的鏈接。

Answer 1

將AddEventListener內部的函數更改為

if(this.getElementsByTagName('div')[0].classList[0]==='front'){
Array.from(card.querySelectorAll(".back, .front")).forEach(function(el) {
  ["back", "front"].forEach(function(s) {
    el.classList.toggle(s);
  });
});
}

會做的工作。 我只是添加了一個if條件if(this.getElementsByTagName('div')[0].classList[0]==='front')

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 個解決方案

解決方案1
2 已采納 2019-05-14 17:32:34

解決方案2
1 2019-05-14 17:39:42

我如何只一次切換js類

問題描述

2 個解決方案

解決方案1 2 已采納 2019-05-14 17:32:34

解決方案2 1 2019-05-14 17:39:42

解決方案1
2 已采納 2019-05-14 17:32:34

解決方案2
1 2019-05-14 17:39:42