尝试结合使用 jQuery 的 window.open 函数和 for 循环来遍历数组时出现问题

Posted 2023-05-09

【中文标题】尝试结合使用 jQuery 的 window.open 函数和 for 循环来遍历数组时出现问题

【英文标题】：Issue when trying to use jQuery's window.open function in combination with a for-loop to iterate through an array

【发布时间】：2017-08-03 22:12:29

【问题描述】：

假设我有一个这样的链接数组：

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 循环内部，它只会返回“未定义”，无论我单击哪个框以防万一。

【参考方案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

【讨论】：

这是一个很好的解决方案。

【参考方案2】：

你做得不对。

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

【参考方案3】：

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

click 事件将仅在循环范围内启动您的函数。这意味着一旦循环完成（并且从 0 计数到 5 对您的计算机来说非常快），您的点击事件就不再有任何附加功能。也就是说，只要i < 5，你的点击函数就会按照你的预期工作，但是之后click事件就不会再调用你创建的函数了。

一种解决方案可能是将函数附加到 HTML 中的 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");

【讨论】：

appendTo($'.container');这行给了我一个错误，但我把它改成了 .appendTo('.container');现在解决方案运行良好。

【参考方案4】：

使用超链接的简单方法

hyperlinks

Demo Here

【讨论】：

不错的主意，但想法是让整个区域都可以点击。不过感谢您的帮助，我很感激！