Question

我有一个带有弹出窗口的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);
    }
}

Answer 1

您的问题是每个循环都将覆盖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>

Answer 2

对于每个div，您都循环遍历所有portolioItemInfos，因此每个div都采用循环的最后一个值。

实际上，您可以简化它，而无需循环portolioItemInfos，只需使用for循环的索引来分配正确的dataTarget。

const portolioItemInfos = [
  {
    dataTarget: 'tempero-restaurante'
  },
  {
    dataTarget: 'aksam-gunesi'
  }
];

const div = document.querySelectorAll('.portfolio-item');
for (let i = 0; i < div.length; i++) {
   div[i].setAttribute('data-target', portolioItemInfos[i].dataTarget);
}

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

Answer 3

您可以使用forEach方法代替传统的for循环，如下所示：

const portolioItemInfos = [
	{ dataTarget: "tempero-restaurante" }, 
	{ dataTarget: "aksam-gunesi" }
]

const div = document.querySelectorAll(".portfolio-item");

portolioItemInfos.forEach(function(item, index){
	div[index].setAttribute("data-target", portolioItemInfos[index].dataTarget);
})

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

您还可以迭代DOM元素对象数组：

div.forEach(function(item, index){
    div[index].setAttribute("data-target", portolioItemInfos[index].dataTarget);
})

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

3 个答案: