javascript - 创建<audio>元素，然后在单击表格单元格时播放

我有一个包含许多单元格的HTML表，我想给每个单元格一个类或ID，这样就可以播放相应的声音。由于有很多单元格，我希望用Javascript+jQuery自动化这个任务，并且减少HTML的混乱。
所以假设我有一个文本a的单元格。我想将该单元格的类设置为click_sound_a并生成一个ID<audio>的sound_a标记，它将播放声音a.mp3。（我也可以对单元格使用ID，但我想我会有一些重复的。）
我以下面的代码为例，有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。虫子在哪里？

最佳答案

<script type="text/Javascript">
 // trigger play event on an audio element
function playSound(sound) {
  return function() {
    $("#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(playSound(sounds[i]));
    } // end for
});
</script>

说明：这是一个典型的JavaScript陷阱。无论何时调用您定义的事件处理程序，它都会查找上次用4更新的i变量的值。您需要使用闭包将适当的值绑定到事件处理程序。
事实上，这几乎和克罗克福德的书中的例子一样：Closure in The Good Parts

关于javascript - 创建<audio>元素，然后在单击表格单元格时播放，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16903584/