Question

我试图这样做，当你将鼠标悬停在狗的照片上时，你可以听到他的吠声。我想出了如何手动完成它，但现在我试图在循环中自动化它，以便代码保持干净。

我正在给出图像和声音相应的ID，这样我就可以创建一个循环，在“＆＃39; image＆＃39;并且＆＃39;声音＆＃39;。这样我可以说＃image1.mouseenter play＃sound1，＃image2.mouseenter play＃sound2。如果这使得sesne

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

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

如何用javascript让狗吠

2 个答案: