从数组中随机显示文本的翻转卡片

Question

我正在尝试通过点击进行卡片翻转。单击一下，它会翻转到后面并显示数组中的一些随机文本。再次点击，它翻转到前面。但是我不想在从后到前单击时更改随机文本。

我想在点击函数中使用布尔循环。当它为真时（背卡）然后显示文本。当它为假（正面卡片）时，则显示相同的文本或为空。现在，每次点击都会改变文本。请帮忙？

        var cards = [
          {animal:"Dog", animal_type:"A"},
          {animal:"Pig", animal_type:"B"},
          {animal:"Hippopo", animal_type:"B"},
          {animal:"Cat", animal_type:"A"}       
        ];
        
        
     
        var card = document.querySelector('.card');
        card.addEventListener( 'click', function() {
        card.classList.toggle('is-flipped');
                

            var display_text = true;
            if(display_text) {
                
                var random_num = Math.floor(Math.random() * 4);  
                document.getElementById("demo").innerHTML = cards[random_num].animal + " " + cards[random_num].animal_type;
                
                return false;
            } else {
                
                document.getElementById("demo").innerHTML = "";
                
                return true;
            }
                

            
        });

        body { font-family: sans-serif; }

        .scene {
          width: 308px;
          height: 446px;
          border: 1px solid #CCC;
          margin: 40px 0;
          perspective: 600px;
        }

        .card {
          width: 100%;
          height: 100%;
          transition: transform 1s;
          transform-style: preserve-3d;
          cursor: pointer;
          position: relative;
        }

        .card.is-flipped {
          transform: rotateY(180deg);
        }

        .card__face {
          position: absolute;
          width: 100%;
          height: 100%;
          /*line-height: 260px;*/
          color: white;
          text-align: center;
          font-weight: bold;
          font-size: 40px;
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
        }

        .card__face--front {
          /*background: red;*/
        }

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

    <div class="scene scene--card">
      <div class="card">
        <div class="card__face card__face--front">
          <img src="./css/images/pokemon_card.png" width="304" height="442" alt="">
        </div>
        <div class="card__face card__face--back">
            <p id="demo">Back</p>
            
        </div>
      </div>
    </div>

Answer 1

我对 JavaScript 做了一些更改。

var cards = [
    { animal: "Dog", animal_type: "A" },
    { animal: "Pig", animal_type: "B" },
    { animal: "Hippopo", animal_type: "B" },
    { animal: "Cat", animal_type: "A" },
];

const
    $card = document.querySelector('.card'),
    $demo = document.querySelector('#demo');
let display_text = true;

$card.addEventListener('click', function () {
    $card.classList.toggle('is-flipped');

    if (display_text) {
        var random_num = Math.floor(Math.random() * 4);
        $demo.innerHTML = cards[random_num].animal + " " + cards[random_num].animal_type;
    }

    display_text = !display_text;
});

*, ::after, ::before {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

body {
    color: #333;
    font-family: "roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}

.scene {
    width: 308px;
    height: 446px;
    border: 1px solid #CCC;
    margin: 40px 0;
    perspective: 600px;
}

.card {
    width: 100%;
    height: 100%;
    transition: transform 1s;
    transform-style: preserve-3d;
    cursor: pointer;
    position: relative;
}

.card.is-flipped {
    transform: rotateY(180deg);
}

.card__face {
    position: absolute;
    width: 100%;
    height: 100%;
    /*line-height: 260px;*/
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.card__face--front {
    /*background: red;*/
}

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

<div class="scene scene--card">
    <div class="card">
        <div class="card__face card__face--front">
            <img src="./css/images/pokemon_card.png" width="304" height="442" alt="">
        </div>
        <div class="card__face card__face--back">
            <p id="demo">Back</p>
        </div>
    </div>
</div>