javascript - 尝试将 jQuery 的 window.open 函数与 for 循环结合使用以遍历数组时出现问题

Question

假设我有一组这样的链接:

var playlist = [
    "",
    "https://www.youtube.com",
    "https://www.google.com",
    "https://www.facebook.com",
    "https://www.instagram.com"
];

以及以下列方式生成的一堆框:

for(var i = 1; i < 5; i++) {
    $(".container").append("<div class='luke luke-" + i + "'>" + "<h3 class='nummer'>Luke " + i + "</h3> " + "</div>");
}

然后我想遍历此数组以在单击框时打开特定链接。

for(var i = 1; i < 5; i++) {
    $(".luke-" + i).click(function(){
        window.open(playlist[i], "_blank");
    })
}

这似乎根本行不通，但是下面的示例完全符合我的要求。

$(".luke-1").click(function(){
    window.open(playlist[1], "_blank");
})
$(".luke-2").click(function(){
    window.open(playlist[2], "_blank");
})
$(".luke-3").click(function(){
    window.open(playlist[3], "_blank");
})
$(".luke-4").click(function(){
    window.open(playlist[4], "_blank");
})
$(".luke-5").click(function(){
    window.open(playlist[5], "_blank");
})

所以这行得通，但是设置起来很麻烦，因为我想要总共有 ​​25 个盒子，如果我想在以后增加或减少这个数量，这个解决方案几乎没有灵 active 。我在这里导致问题的 for 循环做错了什么？

如果我用

console.log(playlist[i]);

在 for 循环内部，无论我单击哪个框，它都会简单地返回“undefined”以防有帮助。

Answer 1

您可以使用数据属性更轻松、更简单地完成此操作。

HTML

<div class="container"></div>

Javascript/jQuery

var playlist = [
    "",
    "https://www.youtube.com",
    "https://www.google.com",
    "https://www.facebook.com",
    "https://www.instagram.com"
];

for(var i = 1; i < 5; i++) {
    $(".container").append("<div class='luke' data-url='" + playlist[i] + "'>" + "<h3 class='nummer'>Luke " + i + "</h3> " + "</div>");
}

$('.luke').click(function() {
    window.open($(this).data('url'));
});

Demo Here