如何用javascript让狗叫

Posted 2023-02-25

【中文标题】如何用javascript让狗叫

【英文标题】：How to make dogs bark with javascript

【发布时间】：2017-04-22 23:48:21

【问题描述】：

我正在努力做到这一点，当您将鼠标悬停在狗的照片上时，您可以听到他的吠声。我想出了如何手动执行此操作，但现在我正尝试在循环中将其自动化，以使代码保持干净。

我为图像和声音提供了相应的 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(););

【问题讨论】：

那有什么问题？

<woof-woof-woof/>!

您没有在 JSFiddle 中包含 jQuery。循环中的 var barking 并不像您想象的那样工作：它会在每次迭代时覆盖之前的值。

@xufox 有没有办法让它每次都写出来？我是 javascript 新手，感谢您指导我。

JavaScript closure inside loops – simple practical example的可能重复

【参考方案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]')，但如果您有很多这样的，这将创建很多需要关注的事件。无论哪种方式，这都是一种权衡，因为在父元素上拥有一个事件处理程序意味着如果有很多其他元素没有有声音，它将不必要地触发。

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

【讨论】：

谢谢！我会试试这个。我是新手，所以我不确定我是否理解它，但我假设这适用于不同狗的不同声音？

@KaZ 重点是在标记中保留狗的声音参考（就像处理狗的图像一样）。 JavaScript 不必知道或关心这些 URL 是什么。是的，它适用于您想要的任何声音。 URL 来自标记。

太棒了！谢谢你对陌生人的教导，希望等我好起来再报恩。

【参考方案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" >
<img id="image2" src="https://www.rocketdogrescue.org/wp-content/uploads/2013/09/lightening.jpg" >
<img id="image3" src="https://www.rocketdogrescue.org/wp-content/uploads/2013/09/pet-food-express.jpg" >

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

【讨论】：

你做到了！！！！非常感谢！！它在这里工作：link

@KaZ 谢谢，虽然我仍然认为Brad's answer 值得考虑，因为它为您提供了更简单、更易于维护的代码