Question

我有四张照片。当我将它们鼠标悬停时，我希望它们中的每一个都能播放不同的声音。好吧，我做到了，但为每个和不同的功能创建了不同的变量。在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>

Answer 1

您的问题this指的是每个<img>标记，而不是音频来源。这是一个有效的codepen，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
    });
}

我们通过this.id获取图片的每个ID，然后在ID前面使用音频获取相应的元素，然后使用.play()方法。

Answer 2

以下是您可以执行的操作：将每个audio标记嵌入div标记旁边的img标记内。这样，当您触发其中一个audio元素时，找到相应的img元素的麻烦就会少得多。

这是新结构：

<div class="container">
  <div class="down music">
    <img id="batman" src="#">
    <audio id="batman" src="sounds/batman.wav"></audio>
  </div>
  <div class="up music">
    <img id="bane" src="#">
    <audio id="bane" src="sounds/ceremony.mp3"></audio>
  </div>
  <div class="down music">
    <img id="joker" src="#">
    <audio id="joker" src="sounds/free.wav"></audio>
  </div>
  <div class="up music">
    <img id="alfred" src="#">
    <audio id="alfred" src="sounds/mud.wav"></audio>
  </div>
</div>

小心ids，但这里无关紧要，因为我们不打算使用它们。

接下来，使用JavaScript，我们将：

选择所有音乐div s：
```
const roll = [...document.querySelectorAll('.music')];
```
我正在使用解构语法将NodeList HTMLElement转换为Array的对象HTMLElement。
循环遍历此数组的所有元素，即所有播放div。我没有使用for循环，而是直接在数组上使用.map方法。它好多了。该方法创建一个新数组，其结果是在roll中的每个元素上调用提供的回调函数。
```
roll.map(function callback())
```
传递给回调的参数是roll的元素（此处称为e）
在回调函数中，我们在querySelector上使用e来查找子img元素。然后我们将事件监听器附加到它：
```
e.querySelector('img').addEventListener('mouseover', function insideCallback());
```

addEventListener还需要回调函数。它只需选择子audio元素并在其上调用方法play()：

e.querySelector('img').addEventListener('mouseover', () => {

    e.querySelector('audio').play()

});

所以最终的代码是：

const roll = [...document.querySelectorAll('.music')];

roll.map(e => {
  e.querySelector('img').addEventListener('mouseover', () => {

    e.querySelector('audio').play()

  });

});

<div class="container">
  <div class="down music">
    <img id="batman" src="#">
    <audio id="batman" src="sounds/batman.wav"></audio>
  </div>
  <div class="up music">
    <img id="bane" src="#">
    <audio id="bane" src="sounds/ceremony.mp3"></audio>
  </div>
  <div class="down music">
    <img id="joker" src="#">
    <audio id="joker" src="sounds/free.wav"></audio>
  </div>
  <div class="up music">
    <img id="alfred" src="#">
    <audio id="alfred" src="sounds/mud.wav"></audio>
  </div>
</div>

Answer 3

以下是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>

Answer 4

您的代码存在一些问题：

ID正在重复 - HTML元素的ID必须唯一 - 这意味着您只能为给定的ID提供一个元素，而是使用类。
在迭代纯HTML项目时，您认为this.audio.play()如何工作？

你需要：

删除不明确的ID - 将其替换为类
实现一种阅读这些自定义属性和播放给定歌曲的方法

鼠标悬停循环

4 个答案: