Javascript 我有一个包含数千个带有URL属性的项目的数组。如何为数组中打开指向URL的iframe的每个项目创建一个按钮？

由于数组中有数千个项目，我无法为每个项目创建

iframe

标记（为了加载），因此如何使其在DOM中只有一个

iframe

，但当您按下具有相应项目名称的按钮时，请使用相应的URL打开iframe

---

前任： 为数组中的每个项目生成一个按钮：

for (var i=0; i < data.length; i++) {
  var item = "<button>" + data[i].name + "</button>";
  $('#list').append(item)
}

for（变量i=0；i

DOM如下所示：

<div id="list"></div>

<iframe id="url-output"></iframe>

---

---

如何执行此操作？

您可以在

#列表上使用事件委派，单击第n个按钮时，访问
数据
数组中的第n个元素，并提取相关URL：

const $buttons = $('#list > button');
$('#list').on('click', 'button', function() {
  const index = $buttons.index(this);
  const { url } = obj.data[index];
  $('#url-output').prop('src', url);
});

只需让动态创建的按钮更改
iframe
的
src


//您需要为对象分配一个标识符
设obj={
“数据”：[
{
“名称”：“Example.com”，
“url”：”https://www.example.com"
},
{
“名称”：“TTS”，
“url”：”https://techtrainsolutions.com"
}    
//再插入几千个相同格式的对象
]
}
//将let用于块范围，避免循环中的经典闭包问题
for（设i=0；i



const $buttons = $('#list > button');
$('#list').on('click', 'button', function() {
  const index = $buttons.index(this);
  const { url } = obj.data[index];
  $('#url-output').prop('src', url);
});