尝试将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个盒子，并且这个解决方案提供了很少的灵活性，如果我想在以后增加或减少这个数量。我在for循环中做错了什么，导致了这里的问题？

如果我使用

console.log(playlist[i]);

在for循环内部，它只是返回"undefined“，而不管我单击哪个框，以防有帮助。

Answer 1

你做得不对。

EXAMPLE FIDDLE

var playlist = [
    "https://www.youtube.com",
    "https://www.google.com",
    "https://www.facebook.com",
    "https://www.instagram.com"
];
var container = $("#container");
for(var i = 1; i < 5; i++) {
 container.append('<div class="luke" db-id="'+ i + '"><h3 class="nummer">Luke ' + i + '</h3></div>'); 
}

$(".luke").click(function(i){
  window.open(playlist[$(this).attr('db-id')], "_blank");
});

Answer 2

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

click事件将仅在循环范围内启动您的函数。这意味着一旦循环结束(从0数到5对你的计算机来说是非常快的)，就没有更多的函数附加到你的点击事件上。换句话说，只要单击，您的i < 5函数就会按预期工作，但在那之后，click事件将不再调用您创建的函数。

一种解决方案是将函数附加到超文本标记语言中的onclick属性，如下所示：

for(var i = 1; i < 5; i++) {
   $('<div/>', {
     'class': 'luke luke-' + i,
     'click': yourFunction(i)
   }).appendTo(${'.container'});

   $('<h3/>', {
      'class':'nummer',
      'html': 'Luke' + i
    }).appendTo(${'.luke-'+i})

}

然后像这样写一个函数：

function yourFunction(index){
   window.open(playlist[index], "_blank");
}

Answer 3

使用data属性可以更容易、更简单地实现这一点。

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