鼠标悬停时循环
鼠标悬停时循环
提问于 2018-06-07 05:41:20
我有四张图片。当我将鼠标移到它们上面时，我想让它们播放不同的声音。我这样做了，但是为每个函数创建了不同的变量，也创建了不同的函数。在超文本标记语言中，我有一个包含图像的容器，然后在另一个<div>中有音频。我创建了一个新变量，用于选择所有图像并循环它们：
var roll = document.querySelectorAll("img");
for (var i=0; i<roll.length; i++){
roll[i].addEventListener("mouseover",function(){
console.log(this);
this.audio.play();
})
}但是，即使“这”是它所说的图像：Cannot read property 'play' of undefined。我对如何将声音和图像联系起来感到困惑。
html如下所示：
<div class="container">
<div class="down music"><img id="batman" src="#"></div>
<div class="up music"><img id="bane" src="#"></div>
<div class="down music"><img id="batman" src="#"></div>
<div class="up music"><img id="batman" src="#"></div>
</div>
<audio id="batman" src="sounds/batman.wav"></audio>
<audio id="bane" src="sounds/ceremony.mp3"></audio>
<audio id="joker" src="sounds/free.wav"></audio>
<audio id="alfred" src="sounds/mud.wav"></audio>回答 1
Stack Overflow用户
发布于 2018-06-07 06:52:45
以下是js中的工作代码：
window.onload = function () {
var roll = document.querySelectorAll("img");
roll.forEach(function (img, i) {
img.addEventListener("mouseover", function () {
console.log(img);
var indx = img.id.split('_').pop();
playMusic(indx);
});
});
}
}
function playMusic(indx) {
var arr = ['sound_0', 'sound_1', 'sound_2', 'sound_3'];
var audio = document.getElementsByTagName('audio')[0];
audio.src = 'sounds/' + arr[indx] + '.wav';
audio.play();
}和html：
<div class="container">
<div class="up music"><img id="img_0" src="#"></div>
<div class="up music"><img id="img_1" src="#"></div>
<div class="down music"><img id="img_2" src="#"></div>
<div class="up music"><img id="img_3" src="#"></div>
</div>
<audio src="sounds/mud.wav"></audio>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50730031
复制相关文章
相似问题