如何用javascript让狗叫

关键词：

【中文标题】如何用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 值得考虑，因为它为您提供了更简单、更易于维护的代码

javascript如何用javascript写日期？(代码片段)

查看详情

如何用javascript检测到所有的ie版本

如何用Javascript检测到所有的IE版本functionGetIEVersion(){varsAgent=window.navigator.userAgent;varIdx=sAgent.indexOf("MSIE");?//IfIE,returnversionnumber.if(Idx>0)returnparseInt(sAgent.substring(Idx+5,sAgent.in 查看详情

如何用javascript隐藏表格列？ [复制]

】如何用javascript隐藏表格列？[复制]【英文标题】：Howtohidetablecolumnwithjavascript?[duplicate]【发布时间】：2016-05-2607:42:23【问题描述】：我需要一些帮助。下面的代码不像我需要的那样工作。我想要什么：借助JavaScript，我想隐藏或... 查看详情

你如何用javascript设置strftime？

】你如何用javascript设置strftime？【英文标题】：Howdoyousetastrftimewithjavascript?【发布时间】：2015-09-1409:15:28【问题描述】：我需要自定义格式日期。在ruby​​中，我会使用strftime或字符串格式的时间来完成此操作。now=Time.newnow.strfti... 查看详情

如何用 c# 填充 javascript 变量？

】如何用c#填充javascript变量？【英文标题】：Howtofilljavascriptvariableswithc#ones?【发布时间】：2014-03-2519:24:24【问题描述】：我的view.cshtml中有这些行：$("document").ready(function()@varcx=Json.Encode(ViewBag.x);varcy=Json.Encode(ViewBag.y);varx=@cx;vary 查看详情

如何用javascript控制arduino？

Arduino运行C语言，而主控端运行JavaScript，一次要编写和维护两种程序。既然浏览器和服务器都用JavaScript，若Arduino也能用JavaScript控制，那岂不完美？这就是RickWaldron设计Johnny-Five库文件的原因。Johnny-Five是1986年上映的科幻电影“Sh... 查看详情

如何用 Javascript 替换和追加

】如何用Javascript替换和追加【英文标题】：HowtoreplaceandappendwithJavascript【发布时间】：2012-11-2004:06:01【问题描述】：我有一个评论系统，我想在其中实现内联编辑（当有人知道一个好的插件或类似的东西时，请不要犹豫给我一个... 查看详情

如何用javascript检查除法的总和？

】如何用javascript检查除法的总和？【英文标题】：Howtocheckthesumofadivisonwithjavascript?【发布时间】：2014-02-1815:57:06【问题描述】：我想检查示例：12-13-14-1512/3=4->好的。13/3=4.33->不行。14/3=4.67->不好。15/3=5->好的。我想创建... 查看详情

如何用javascript下载文件

简介我们知道，下载文件是一个非常常见的需求，但由于浏览器的安全策略的限制，我们通常只能通过一个额外的页面，访问某个文件的url来实现下载功能，但是这种用户体验非常不好。幸好，HTML5里面为 <a> 标签添... 查看详情

如何用javascript编写一个又一个元素？ [复制]

】如何用javascript编写一个又一个元素？[复制]【英文标题】：Howtowriteanelementjustafteranotherwithjavascript?[duplicate]【发布时间】：2011-09-0415:51:47【问题描述】：我需要在另一个元素（文本区域）之后添加一个onclick元素。我该怎么做？... 查看详情

如何用javascript插入换行符？

】如何用javascript插入换行符？【英文标题】：Howtoinsertalinebreakwithjavascript?【发布时间】：2014-04-1122:19:45【问题描述】：我的提交表单包含姓名、电子邮件和电话号码字段。当然，我想在三者之间插入换行符。我试图在所有三个... 查看详情

如何用纯javascript修改html css dom？ [关闭]

】如何用纯javascript修改htmlcssdom？[关闭]【英文标题】：Howtomodifythehtmlcssdomwithpurejavascript?[closed]【发布时间】：2017-02-1613:51:02【问题描述】：这是我的问题：有没有办法只使用javascript来修改css文件？【问题讨论】：啊..标题..我们... 查看详情

如何用javascript制作循环图形

【图题思路】          1.确定图形一共几行，即为外层的循环的次数 2.确定每行有几种元素，代表有几个内层循环 3.确定每种元素的个数，即为每个内层循环的次数Tips：通常，找出每... 查看详情

如何用jquery/javascript读取xml文件

//Performwhenthedocumentisready/loaded/rendered$(document).ready(function(){//Asynchronouslyretrievethexmlfilecontents $.ajax({ type:"GET", url:" 查看详情

如何用iframe标签以及javascript制作时钟？

如何利用iframe标签以及Javascript制作时钟？　　如何制作一个时钟呢？效果如下图所示：这里的时钟会不停的走，但是下面的页面是不会变得，这样就实现了我们想要的效果了。下面我将分为以下几个方面来讲：javascript中的Date引... 查看详情

如何用另一个数组值替换javascript中的数组值？

】如何用另一个数组值替换javascript中的数组值？【英文标题】：Howtoreplacevalueofarrayinjavascriptwithanothervalueofarray?【发布时间】：2021-01-2713:22:27【问题描述】：我正在尝试用另一个数组替换字符串中存在的数组中的值。在Javascript中... 查看详情

如何用javascript更改元素的类？

如何使用JavaScript更改响应onclick事件的HTML元素类？答案我会使用jQuery并写这样的东西：jQuery(function($){$("#some-element").click(function(){$(this).toggleClass("clicked");});});此代码添加了在单击idsome元素的元素时要调用的函数。如果元素的类属... 查看详情

JavaScript数学函数：如何用千分位逗号格式化答案[重复]

】JavaScript数学函数：如何用千分位逗号格式化答案[重复]【英文标题】：JavaScriptMathFunction:HowtoFormatAnswerw/CommainThousandthsPlace[duplicate]【发布时间】：2013-06-0107:45:34【问题描述】：我正在编写一个javascript代码，允许用户计算他们的... 查看详情