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

【问题标题】：Create <audio> elements and then play when table cells is clicked创建 <audio> 元素，然后在单击表格单元格时播放
【发布时间】：2013-05-30 00:11:26
【问题描述】：

我有一个包含许多单元格的 HTML 表格，我想为每个单元格指定一个类或 ID，以便可以播放相应的声音。由于单元格很多，我想使用 Javascript+jQuery 自动执行此任务，并减少混乱的 HTML。

所以假设我有一个带有文本a 的单元格。我想将该单元格的类设置为click_sound_a 并生成一个ID 为sound_a 的<audio> 标记，它将播放声音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。错误在哪里？

【问题讨论】：

标签： javascript jquery html closures

【解决方案1】：

<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 变量的值。您需要使用闭包将适当的值绑定到事件处理程序。

事实上，这与 Crockford 书中的例子几乎相同：Closure in The Good Parts

【讨论】：