Javascript 尝试使用jQuery'时出现问题；s window.open函数与for循环结合使用，以迭代数组

假设我有一系列这样的链接：

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>");
}

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

如果我使用

console.log(playlist[i]);

---

在for循环内部，它只返回“undefined”（未定义），而不管我单击哪个框以防有帮助。

您做得不对

var播放列表=[
"https://www.youtube.com",
"https://www.google.com",
"https://www.facebook.com",
"https://www.instagram.com"
];
var container=$（“#container”）；
对于（变量i=1；i<5；i++）{
container.append（'Luke'+i+''）；
}
$（“.luke”）。单击（函数（i）{
window.open（播放列表[$（this.attr（'db-id'））]，“_blank”）；
});

然后编写如下函数：

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");
}

---

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

HTML

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'));
});

var播放列表=[
"",
"https://www.youtube.com",
"https://www.google.com",
"https://www.facebook.com",
"https://www.instagram.com"
];
对于（变量i=1；i<5；i++）{
$（“.container”）.append（“+”Luke“+i+”）；
}
$（'.luke'）。单击（函数（）{
window.open（$（this.data（'url'））；
});

---

使用超链接的简单方法

hyperlinks

---

这是一个很好的解决方案；此行给了我一个错误，但我将其更改为.appendTo（'.container'）；这个解决方案现在运行良好。这不是一个坏主意，但想法是让整个区域都可以点击。谢谢你的帮助，我很感激！

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");
}

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

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'));
});

hyperlinks