Question

我有一系列歌曲，每首歌曲在数组和.source属性中都有索引号。我写了一个脚本，为每首歌创建一个表格行：

var list = document.getElementsByClassName("preview")[1];
for (y = 0; y < allSongs.length; y ++) {
    var row = list.insertRow(-1);
    var celeft = row.insertCell(0);
    var celright = row.insertCell(1);
    celright.innerHTML = allSongs[y].name;
    celeft.setAttribute("class", "left");

但是现在我想把所有那些左边的单元格（0）链接到歌曲上，我试着这样做：

    x = document.getElementsByClassName("left");
var counter = 0;
while (counter < allSongs.length) {
    x[counter+1].addEventListener('click', function() {
        document.getElementById("audplayer").setAttribute("src", allSongs[counter].source);
    });
    counter++;
}

基本上，我使用addEventListener属性使它们可以点击，但问题是 addEventListener函数没有循环，所以不保存计数器值，每次单击其中一个表格单元格时，计数器在那一刻的值为3。我理解问题的来源，但我无法解决。怎么解决这个问题？

更多细节（如果说明不够清楚）：我希望每个表单元格执行不同的操作（播放不同的歌曲），但它们都播放相同的 - allSongs [3]，因为当click事件发生时计数器值，而不是每次执行while循环时的

Answer 1

尝试用lodash中的map和_.zip替换你的循环。

伪代码示例：

song_and_elem_pairs = _.zip(allSongs, x);
song_and_elem_pairs.map(function (song, elem) {
    elem.addEventListener('click', function() {
        document.getElementById("audplayer").setAttribute("src", 
            song.source);
    }
});

您也可以使用地图替换for (y = 0; y < allSongs.length; y ++)循环。

这当然不是唯一的方法，但这是我接近它的方式，我认为它应该解决你的问题。

逻辑循环混淆javascript

1 个答案: