如何使用<li>事件目标属性访问元素中的特定值？

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
}

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>

Answer 2

您只需split event.target的textContent即可获得c.symbol：

function populateCompanyInfo(e) {
    var cSymbol = e.target.textContent.split(", ")[0];
    //Do something with cSymbol
}

Answer 3

一个选项是保留匿名点击处理程序，复制c.symbol并将其作为参数传递给populateCompanyInfo：

for(let c of data){
        let node = document.createElement('li');
        node.textContent = c.companyName + ', ' + c.symbol; //only want c.symbol
        companyList.appendChild(node);
        let cSymbol = c.symbol;
        node.addEventListener('click', function(e){
            populateCompanyInfo(e, cSymbol);
        });
    }  
function populateCompanyInfo(e, cSymbol){
    // c.symbol is the second argument.
}

，如果您曾经需要访问其他数据属性，也可以通过用c调用populateCompanyInfo作为参数传递整个数据对象：

 populateCompanyInfo( c); // if the event object is not needed