javascript - HTML 表格列只播放第一个音频的声音

Question

我创建了一个每行 2 列的表格，当鼠标悬停在其列上时会播放相应的声音。问题是它只为所有列播放第一个声音 test1.ogg？

window.onload = function() {
   var mySound = document.getElementById('mySound');
   var myIcons = document.getElementsByClassName('myIcon');

   for(var i = 0; i < myIcons.length; i++) {
      myIcons[i].onmouseover = function() {
        mySound.play();
        return false;
      };
   };
}; 

<tr>
   <td class="myIcon">Test1
      <audio id='mySound'  preload="auto"><source src='test1.ogg'/>
      </audio>
   </td>
   <td class="myIcon">Test2
      <audio id='mySound'  preload="auto"><source src='test2.ogg'/>
      </audio>
   </td>
</tr>

Answer 1

ID 必须是唯一的。但想象一下，您的表格中有 5000 个单元格——那么您最终将有 5000 个听众在周围徘徊。这不是个好主意。相反，您可以在父元素上只使用一个监听器并删除所有类和 id-s 以使标记更清晰，如下所示:

window.onload = function() {
  document.getElementById("myTable").addEventListener("mouseover", function(e) {
    if (e.target.tagName === "TD") {
      e.target.childNodes[1].play();
      return false;
    }
  }, false);
};

<table id="myTable">
<tr>
   <td>Test1
      <audio preload="auto"><source src='test1.ogg'/></audio>
   </td>
   <td>Test2
      <audio preload="auto"><source src='test2.ogg'/></audio>
   </td>
</tr>
</table>