Question

我创建了一个每行2列的表，其中mouseover上的列将播放相应的声音。问题是它只播放所有列的第一个声音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

我必须是独一无二的。但想象一下，你的桌子里会有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>

HTML表格列仅播放所有人的第一个音频的声音

1 个答案: