如何获取被点击的li(Javascript，Materialize)的变量？

Question

我有3个li's，想要得到被点击的li的所有变量(name，distance，Ort，PLZ)。我是Javascript的新手，非常感谢大家的帮助。

  const li = `
  <li id= "${doc_id}">
    <div class="collapsible-header grey lighten-4 right-align"> ${name} ${distance}km from you (${Ort},${PLZ}) </div>
    <div class="collapsible-body white"><span>hey</span>
  </li>
  <li id= "${doc_id}">
    <div class="collapsible-header grey lighten-4 right-align"> ${name} ${distance}km from you (${Ort},${PLZ}) </div>
    <div class="collapsible-body white"><span>wassup</span>
  </li>
  <li id= "${doc_id}">
    <div class="collapsible-header grey lighten-4 right-align"> ${name} ${distance}km from you (${Ort},${PLZ}) </div>
    <div class="collapsible-body white"><span>lol</span>
  </li>
`;
html += li;

console.log(name,distance,Ort,PLZ)
//expectation

Answer 1

由于在创建LI标记时循环中有您想要的数据，因此可以将该信息作为数据属性插入，以便在用户单击时轻松检索。在下面的可测试代码片段中的注释中有更多解释。

​

// dummy data
let doc_id = 12,name = "McDonalds",distance = 123,Ort = 1,PLZ = 2

// in the div tag below, notice how I added data-attributes for distance and name
const li = `
  <li id="${doc_id}">
    <div data-name="${name}" data-distance="${distance}" class="collapsible-header grey lighten-4 right-align"> ${name} ${distance}km from you (${Ort},${PLZ}) </div>
    <div class="collapsible-body white"><span>hey</span>
  </li>
`;

// wait until the page is loaded before adding listners
window.addEventListener('load', () => {
  document.querySelector('ul').innerHTML = li; // set up our dummy data for the example

  // listen to the click on the div
  document.addEventListener('click', (e) => {
    // check if we have clicked on one of our div tags
    if (e.target.dataset.distance !== '') {
      // we can access those data attributes with e.target.dataset.ITEM
      // the id is on the LI tag, so we grab that from the parentNode property
      console.log(`Clicked on! id: ${e.target.parentNode.id}, name: ${e.target.dataset.name}, distance: ${e.target.dataset.distance} `);
    }
  })

})

<ul></ul>

​