javascript - 我将如何访问特定值使用事件目标属性的元素？

Question

假设我只想访问已添加到在另一个函数中的 for 循环中创建的 li 元素的 c.symbol 值。我该怎么做呢？

for(let c of data){
        let node = document.createElement('li');
        node.textContent = c.companyName + ', ' + c.symbol; //only want c.symbol
        companyList.appendChild(node);
        node.addEventListener('click', function(e){
            if(e.target && e.target.nodeName.toLowerCase() == "li"){
                populateCompanyInfo(e);
            }
        });
    }  
function populateCompanyInfo(e){
    //I want to be able to access the c.symbol value in here using the taget

}

标签： javascripthtmlcss

Answer 1

我建议您使用dataset属性来存储要附加到元素的数据。

let data = [{
  symbol: "EleFromStack",
  companyName: "Stack"
}];

let companyList = document.getElementById("companyList");
for (let c of data) {
  let node = document.createElement('li');
  node.textContent = c.companyName + ', ' + c.symbol; //only want c.symbol
  node.dataset.symbol = c.symbol; // Here I'm storing the c.symbol value
  companyList.appendChild(node);
  node.addEventListener('click', function(e) {
    if (e.target && e.target.nodeName.toLowerCase() == "li") {
      populateCompanyInfo(e);
    }
  });
}

function populateCompanyInfo(e) {
  console.log(e.target.dataset.symbol)
}

<ul id="companyList">
</ul>