首頁猿問動態(tài)創(chuàng)建元素時，單擊時看不到屬性

動態(tài)創(chuàng)建元素時，單擊時看不到屬性

JavaScript

子衿沉夜 2023-08-24 17:33:03

我有一個數(shù)據(jù)數(shù)組，我從中創(chuàng)建元素。當我掛起事件處理程序時， dataset.container 是未定義的。如何獲取屬性，或者如何以不同的方式創(chuàng)建元素來獲取數(shù)據(jù)類別？const cards = [ [], [], []]function renderCategory(card) { let str = ''; for (let i = 0; i < card.length; i++) { str += `<div class="card card-category" data-category="${i}"> <div class="card-image"> <img src="${card[i].image}"> </div> <div class="card-desc"> <div class="card-text">${card[i].name}</div> </div> </div>`; } return str;}let categoryCard = cards[0];function createCard(cards) { const main = document.getElementById('category'); main.innerHTML += renderCategory(cards);}createCard(categoryCard)document.addEventListener('DOMContentLoaded', () => { document.querySelector('#category').addEventListener('click', ({ target: { dataset } }) => { console.log(dataset.category) // undefined })})

查看完整描述

2 回答

阿波羅的戰(zhàn)車

TA貢獻1862條經(jīng)驗獲得超6個贊

那么幾件事

其一，我無法將您的addEventListener('click', ({ target: { dataset }構(gòu)造識別為有效的 JavaScript。

我試圖不做太多改變，但我

返回全套卡片
正確地從容器中委托 - 單擊卡中的任意位置將返回類別

let categoryCard;

const cards = [

{ image : "https://via.placeholder.com/128x90.png?text=Card1", name:"Card 1"},

{ image : "https://via.placeholder.com/128x90.png?text=Card2", name:"Card 2"},

{ image : "https://via.placeholder.com/128x90.png?text=Card3", name:"Card 3"}

]

function renderCategory(cards) {

return cards.map((card,i) => (

`<div class="card card-category" data-category="${i}">

</div>

</div>

</div>`)).join("");

}

function createCard(cards) {

const main = document.getElementById('category');

main.innerHTML += renderCategory(cards);

categoryCard = main.querySelector(".card-category"); // first card

}

window.addEventListener('load', () => {

document.querySelector('#category').addEventListener('click', e => {

const tgt = e.target;

const parent = tgt.classList.contains("card-category") ? tgt : tgt.closest(".card-category")

console.log(parent && parent.dataset.category ? parent.dataset.category : "clicked somewhere else")

})

createCard(cards)

})

反對回復(fù) 2023-08-24

揚帆大魚

TA貢獻1799條經(jīng)驗獲得超9個贊

event.target指的是觸發(fā)事件的 DOM 樹的最低元素。換句話說，根據(jù)您單擊的位置，target可以是卡片類別 DIV、卡片圖像 DIV、卡片描述 DIV、卡片文本 DIV 或 IMG 元素。這就是為什么您無法訪問僅在父級上設(shè)置的數(shù)據(jù)屬性的原因。

如果您希望始終獲取綁定事件的元素，請改用event.currentTarget。但就您而言，您將事件綁定到主#category包裝器。如果要將事件綁定到具有該屬性的元素data-category，則必須重新組織代碼以使用document.createElement而不是生成 HTML 字符串。

請記住，您應(yīng)該在將事件綁定到元素之前將元素附加到頁面。

反對回復(fù) 2023-08-24