时间戳

首页 > 解决方案 > 鼠标悬停循环

javascript - 鼠标悬停循环

问题描述

我有四个图像。当我将鼠标悬停在它们上时，我希望它们中的每一个都播放不同的声音。好吧，我这样做了，但是为每个函数和不同的函数创建了不同的变量。在 HTML 中，我有一个包含图像的容器，然后是另一个<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>

标签： javascriptimageonmouseover

解决方案

您的问题是this指每个<img>标签，而不是音频源。这是一个有效的代码笔，它会onMouseOver提醒相应的 div 的值。（我无法访问音频源，但应该相对容易切换）。以下应该适用于音频标签，当然我没有对此进行测试。

HTML：

<div class="container">
   <div class="down music"><img id="monkey" src="https://images.pexels.com/photos/145947/pexels-photo-145947.jpeg?auto=compress&cs=tinysrgb&h=350" height="90"></div>   
   <div class="up music"><img id="dog" src="https://boygeniusreport.files.wordpress.com/2016/11/puppy-dog.jpg?quality=98&strip=all&w=782" height="90"></div>
   <div class="down music"><img id="cat" src="https://www.bluecross.org.uk/sites/default/files/styles/thumbnail_pet/public/pets/149194.jpg?itok=xZLl3maM" height="90"></div>
   <div class="up music"><img id="cow" src="https://boygeniusreport.files.wordpress.com/2016/11/puppy-dog.jpg?quality=98&strip=all&w=782" height="90"></div>
</div>

<audio id="audiomonkey" src="#">monkey</audio>
<audio id="audiodog" src="#">dog</audio>
<audio id="audiocat" src="#">cat</audio>
<audio id="audiocow" src="#">cow</audio>

JavaScript：

var roll = document.querySelectorAll("img");
for (var i=0; i<roll.length; i++){
    roll[i].addEventListener("mouseover",function(){
       var idOfImg = this.id; //gets each id of the img
       document.getElementById("audio" + idOfImg).play(); //gets your right sound, based off id
    });
}

我们通过获取图片的每个id，this.id然后获取id前面有audio的对应元素，然后就使用.play()方法了。

推荐阅读