我有一个包含许多单元格的 HTML 表格,我想为每个单元格指定一个类或 ID,以便可以播放相应的声音。由于单元格很多,我想使用 Javascript+jQuery 自动执行此任务,并减少混乱的 HTML。
所以假设我有一个带有 text 的单元格a
。我想将该单元格的类设置为click_sound_a
并生成一个带有将播放声音<audio>
的 ID 的标签。(我也可以为单元格使用 ID,但我想我会有一些重复。)sound_a
a.mp3
我以以下代码为例,其中包含 5 种声音:
<script type="text/Javascript">
// trigger play event on an audio element
function playSound(sound) {
$("#sound_"+sound).get(0).play();
}
$(document).ready(function() {
var sounds = ["a", "i", "u", "e", "o"];
// create HTML5 <audio> elements
for (var i in sounds) {
$("<audio id='sound_"+sounds[i]+"'> <source src='/downloads/sounds/"+sounds[i]+".mp3' type='audio/mpeg'> </audio>").appendTo("#page");
// make columns clickable to play sounds
$(".click_sound_"+sounds[i]).click(function() {
playSound(sounds[i]);
});
} // end for
});
</script>
问题在于,当循环终止时,所有单元都会收到最后一个元素的声音,即使它们已被分配了正确的类。所以在这种情况下,每个单元格都会播放o.mp3
。错误在哪里?