时间戳

首页 > 解决方案 > 我无法写入 DIV 对象中的所有项目

javascript - 我无法写入 DIV 对象中的所有项目

问题描述

我有一个带有弹出窗口的 div 列表。每个 div 都会从一个对象中获取 data-target 属性。我可以返回对象中的所有项目，但只得到最后一个项目。

<div class="portfolio-item" data-toggle="modal"></div>
<div class="portfolio-item" data-toggle="modal"></div>

const portolioItemInfos = [
    { dataTarget: "tempero-restaurante" }, 
    { dataTarget: "aksam-gunesi" }
]

const div = document.querySelectorAll(".portfolio-item");
for (let key of div) {
    for (let item of portolioItemInfos) {
        key.setAttribute("data-target", item.dataTarget);
    }
}

标签： javascriptfor-loop

解决方案

您的问题是您正在覆盖data-target每个循环的属性。data-target相反，您需要通过获取当前值并将新值添加到它的末尾来附加到属性的末尾。你可以这样做：

let prev = key.getAttribute('data-target');
prev = prev ? prev : '';
key.setAttribute("data-target", (prev +' ' +item.dataTarget).trim());

请参见下面的示例（检查元素以查看结果）：

const portolioItemInfos = [{
    dataTarget: "tempero-restaurante"
  },
  {
    dataTarget: "aksam-gunesi"
  }
]

const divs = document.querySelectorAll(".portfolio-item");
for (let key of divs) {
  for (let item of portolioItemInfos) {
    let prev = key.getAttribute('data-target');
    prev = prev ? prev : ''; // if prev is isn't null, set prev equal to prev. If prev is null, then set prev to the empty string
    
    key.setAttribute("data-target", (prev +' ' +item.dataTarget).trim());
  }
}
<div class="portfolio-item" data-toggle="modal"></div>
<div class="portfolio-item" data-toggle="modal"></div>

推荐阅读