如何用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

更好的方法是在标签上添加数据属性，指定要播放的声音。然后，有一个简单的处理程序。

在您的 HTML 中：

<div class="dogs">
  <img src="dog.jpg" data-hover-sound="dog.mp3" />
</div>

然后，在你的 JavaScript 中：

$('.dogs').on('mouseenter', '[data-hover-sound]', function () {
  var audio = new Audio($(this).attr('data-hover-sound'));
  audio.play();
});

未经测试，但类似的东西应该可以工作。基本上，您在.dogs 的容器上添加一个处理程序，并仅过滤具有悬停声音的标签。

或者，您可以只使用$('[data-hover-sound]')，但如果您有很多这样的，这将创建很多需要关注的事件。无论哪种方式，这都是一种权衡，因为在父元素上拥有一个事件处理程序意味着如果有很多其他元素没有有声音，它将不必要地触发。

另外，当你有这个工作时，看看油门和/或去抖动。

Answer 2

您需要一个闭包，以便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>