javascript - 如何用JavaScript制作狗吠

Question

我正在尝试这样做，以便当您将鼠标悬停在狗的照片上时，可以听到它的吠声。我想出了手动操作的方法，但是现在我试图以循环方式使其自动化，以使代码保持干净。

我给了图像和声音相应的ID，以便创建一个循环，在“图像”和“声音”的末尾添加一个数字。这样，我可以在＃image1.mouseenter播放＃sound1和＃image2.mouseenter播放＃sound2上说。如果那使塞塞内

here is the jsfiddle I created.
这是我写的脚本:

var i;
for (i = 1; i<=3; i++){
  var barking = $("#sound"+i)[0];
  $("#image"+i).mouseenter(function(){
    barking.play();});
  $("#image"+i).mouseleave(function(){
    barking.pause();});
}

Answer 1

您需要一个闭包，以便在传递给事件处理程序时i变量具有正确的值

下面是一种方法，还有更多方法:JavaScript closure inside loops

for (var i = 1; i <= 3; i++) {
  (function(j) {
    $("#image" + j).mouseenter(function() {
      $("#sound" + j)[0].play();
    });
    $("#image" + j).mouseleave(function() {
      $("#sound" + j)[0].pause();
    });
  })(i);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image1" src="https://www.rocketdogrescue.org/wp-content/uploads/2013/09/DSC_0718.png" width="400px">
<img id="image2" src="https://www.rocketdogrescue.org/wp-content/uploads/2013/09/lightening.jpg" width="400px">
<img id="image3" src="https://www.rocketdogrescue.org/wp-content/uploads/2013/09/pet-food-express.jpg" width="400px">

<audio id="sound1" preload="auto" loop="loop">
  <source src="http://soundbible.com/mp3/Dogs Barking-SoundBible.com-625577590.mp3">
</audio>

<audio id="sound2" preload="auto" loop="loop">
  <source src="http://soundbible.com/mp3/Dog Woof-SoundBible.com-457935112.mp3">
</audio>

<audio id="sound3" preload="auto" loop="loop">
  <source src="http://soundbible.com/mp3/dog-howling-yapping-daniel_simon.mp3">
</audio>