亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

動態創建元素時,單擊時看不到屬性

動態創建元素時,單擊時看不到屬性

子衿沉夜 2023-08-24 17:33:03
我有一個數據數組,我從中創建元素。當我掛起事件處理程序時, dataset.container 是未定義的。如何獲取屬性,或者如何以不同的方式創建元素來獲取數據類別?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 回答

?
阿波羅的戰車

TA貢獻1862條經驗 獲得超6個贊

那么幾件事

其一,我無法將您的addEventListener('click', ({ target: { dataset }構造識別為有效的 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 class="card-image">

        <img src="${card.image}">

      </div>

      <div class="card-desc">

        <div class="card-text">${card.name}</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)

})

<div id="category"></div>


查看完整回答
反對 回復 2023-08-24
?
揚帆大魚

TA貢獻1799條經驗 獲得超9個贊

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

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

請記住,您應該在將事件綁定到元素之前將元素附加到頁面。


查看完整回答
反對 回復 2023-08-24
  • 2 回答
  • 0 關注
  • 214 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號