Question

每当单击li框时，我都希望有li的（名称）的第一个标签。但是目前，我的代码只会显示被点击的标签。

这里是jsfiddle https://jsfiddle.net/ehagk1d7/的链接，因为完全相同的代码似乎在代码段中不起作用。

    function test() {
        console.log(event.target.textContent);
    }

<li class="lijst" onclick="test()">
  <p>Naam, PraktijkNaam</p>
  <p>Adres</p>
  <p>Email</p>
  <p>Mobiel</p>
</li>

Answer 1

您可以使用this作为参数来添加处理程序附加到的元素。然后，您可以在处理程序函数中使用此参数。 event.target是指单击的元素，该元素传播到lijst元素，而不是处理程序附加到的元素。 querySelector()将返回第一个匹配的元素。

function test(el) {
  console.log(el.querySelector('p').textContent);
}

<li class="lijst" onclick="test(this)">
  <p>Naam, PraktijkNaam</p>
  <p>Adres</p>
  <p>Email</p>
  <p>Mobiel</p>
</li>

更好的方法是摆脱内联事件处理程序，并在javascript中定义事件处理程序，如下面的代码段所示。

document.querySelectorAll('.lijst').forEach(el => { 
  el.addEventListener('click', function(){
    console.log(this.querySelector('p').textContent);
  });
});

<li class="lijst">
  <p>Naam, PraktijkNaam</p>
  <p>Adres</p>
  <p>Email</p>
  <p>Mobiel</p>
</li>

<li class="lijst">
  <p>Naam, Nog een PraktijkNaam</p>
  <p>Adres</p>
  <p>Email</p>
  <p>Mobiel</p>
</li>

Answer 2

使用firstElementChild

function test(el) {
  alert(el.firstElementChild.textContent );
}

<li class="lijst" onclick="test(this)">
  <p>Naam, PraktijkNaam</p>
  <p>Adres</p>
  <p>Email</p>
  <p>Mobiel</p>
</li>

如果您想保留事件元素，请使用currentTarget，它始终是函数的原始“节点”

function test() {
    console.log(event.currentTarget.firstElementChild.textContent);
}

<li class="lijst" onclick="test()">
  <p>Naam, PraktijkNaam</p>
  <p>Adres</p>
  <p>Email</p>
  <p>Mobiel</p>
</li>

使用纯JavaScript获取li box的第一个标签textcontent

2 个答案: