對象列表單擊事件

Question

我想在我的網頁上顯示並單擊 html 列表中的對象。 包含 object 值（名稱）的 html 列表的創建效果很好，點擊事件也是如此。 但我無法獲得點擊的 object 值（例如名稱）。 結果：

(e.target.id) 是''（空）。

//Array of objects
let tierArray = {
  "name": data.Name,
  "geburtstag": data.Geburtstag,
  "geschlecht": data.Geschlecht,
  "idNummer": data["ID Nummer"],
  "imageIndexPath": data["Image Index Path"],
  "information": data.Information,
  "rasse": data.Rasse,
  "tierart": data.Tierart,
  "imTierheimSeit": data["im Tierheim seit"]
}

listOfTierObjects.push(tierArray);

//this works
for (let i = 0; i < listOfTierObjects.length; i++) {
  let row = `${listOfTierObjects[i].name}`;
  document.getElementById("tiereList").innerHTML += '<li>' + row + '</li>';
};

//The problem is here
document.getElementById("tiereList").onclick = function(e) {
  console.log(e.target.id);
}

Answer 1

您沒有在li上放置任何id ，因此e.target.id是"" 。

您還沒有說要放在那里的值，但是例如，如果您願意，可以將索引放在那里：

document.getElementById("tiereList").innerHTML += '<li id="' + index + '">' + row + '</li>';

...盡管我認為我會改用data-*屬性。

（注意：有人可能會告訴您id="1" [例如] 無效，但這是一個常見的神話id可以是您想要的任何東西，只要它是唯一的並且沒有任何空格。神話來自 CSS ID 選擇器不能以未轉義數字開頭的事實。但同樣，我不會為此使用id [如果你在兩個地方這樣做怎么辦？]。我會使用...data-index="' + index + '"...和getAttribute("data-index"0代替。)

---

一些旁注：

• 在innerHTML上使用+=不是最佳實踐。 要么在變量中構建完整的字符串並對innerHTML進行單個分配，要么使用insertAdjacentHTML ，或者改用createElement 。
• 盡管getElementById非常快，但如果您要在循環中為同一個元素使用它，那么將它抓取到一個變量並重用該變量可能會更清楚。
• let row = `${listOfTierObjects[i].name}`; 當listOfTierObjects[i].name是一個字符串時，可以更簡單地寫成let row = listOfTierObjects[i].name; .
• 我建議使用addEventListener ，而不是分配給.onclick 。
• 您當前的點擊處理程序將起作用，但如果您在li中有任何子元素，它將無法可靠地工作。 相反，使用const li = e.target.closest("li"); 可靠地獲取li元素，即使點擊是在li中的子元素上。

更多的：

• data-*屬性
• addEventListener
• closest