Javascript 阵列使用 responsiveVoice api

Question

我正在构建一个应用程序，当我点击卡片时它会翻转并生成一个随机单词。然后我将鼠标悬停在随机单词上。该程序正在调用 responsiveVoice api，传递参数并说出单词。我的问题是这只适用于第一次。当我再次单击卡片时，卡片会翻转，然后我将鼠标悬停在随机文本上，它会重复最后一个单词 + 新单词。知道如何解决 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;
              
                //here
                 $("#demo").hover(function(){
                      speak();
                   });
                
                 function speak() {
                    responsiveVoice.speak(cards[random_num].animal, "UK English Male");
                }
                
                //end
                
                
            }

            display_text = !display_text;
        });

        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: #009688; 
          transform: rotateY(180deg);
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
    <p>Click card to flip.</p>  
    
    
    
    <!-- web speech api --> 
    <script src="https://code.responsivevoice.org/responsivevoice.js?key=QugTbpmd"></script> 
    
    



</body>
</html>

Answer 1

我已经把悬停事件从点击事件中移除了..

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;

var random_num;

//here
$("#demo").hover(function() {
  speak();
});

function speak() {

  responsiveVoice.speak(cards[random_num].animal, "UK English Male");
}

//end

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


  if (display_text) {

    random_num = Math.floor(Math.random() * 4);
    $demo.innerHTML = cards[random_num].animal;

  }

  display_text = !display_text;
});

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: #009688;
  transform: rotateY(180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<p>Click card to flip.</p>



<!-- web speech api -->
<script src="https://code.responsivevoice.org/responsivevoice.js?key=QugTbpmd"></script>





</body>

</html>

Javascript 阵列使用 responsiveVoice api

Javascript array using responsiveVoice api

javascript

jquery

arrays

api

responsivevoice