Блог

Главная - Вопросы по программированию - Флип-карта со случайным отображаемым текстом из массива

Флип-карта со случайным отображаемым текстом из массива

#javascript #jquery #loops #boolean

#javascript #jquery #циклы #логическое значение

Вопрос:

Я пытаюсь сделать переворот карты щелчками мыши. Один щелчок, он переворачивается назад и отображает некоторый случайный текст из массива. Нажмите еще раз, он перевернется вперед. Но я не хочу менять случайный текст при щелчке сзади вперед.

Я думал использовать логический цикл в функции щелчка. Когда это значение true (обратная карта), затем отобразите текст. Если оно равно false (передняя карта), тогда отображается тот же текст или пустой. Теперь он меняет текст с каждым щелчком мыши. Пожалуйста, помогите?

         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>

Ответ №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>