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

標識必須是唯一的。但想象一下，你的桌子上有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>