如何使用 javascript onclick 控制台记录第二个 li 元素答案

【问题标题】：How can I console.log the second li element using javascript onclick如何使用 javascript onclick 控制台记录第二个 li 元素
【发布时间】：2019-02-15 21:34:23
【问题描述】：

<h3>Shirts</h3>
<ul id='list'>
    <li>Biker Jacket</li>
    <li>Mens Shirt</li>
</ul>

我需要让 console.log 退出第二个 li 元素。我尝试了下面的代码，但我只能访问第一个 li 元素

document.querySelector("li").onclick = () => {
    console.log("Biker Jacket");
};

【问题讨论】：

使用这个选择器：ul>li:nth-child(2)
document.querySelectorAll('li')[1] 将选择第二次出现的 li，因为它是从 0 开始的。
如果一个问题在前 5 分钟内得到 5 个答案，那么您就知道您没有进行足够的研究。
见stackoverflow.com/questions/22902447/…

标签： javascript dom-events

【解决方案1】：

只需改用querySelectorAll() 方法并像这样定位第二个li 元素：

document.querySelectorAll("#list li")[1].onclick = () => {
  console.log("Biker Jacket");
};

<h3>Shirts</h3>
<ul id='list'>
    <li>Biker Jacket</li>
    <li>Mens Shirt</li>
</ul>

【讨论】：

我为 [1] 尝试了不同的迭代和位置，不知道你可以通过 #list li 但它工作得很好。非常感谢

【解决方案2】：

您可以使用 li 的这个 onclick 传递元素并使用 textContent 打印其文本

function a(e)
{
console.log(e.textContent)
}

<h3>Shirts</h3>
<ul id='list'>
    <li onclick="a(this)">Biker Jacket</li>
    <li onclick="a(this)">Mens Shirt</li>
</ul>

【讨论】：

【解决方案3】：

第二个使用querySelectorAll[1]：

document.querySelector("li").onclick = () => {
    console.log("Biker Jacket");
};
document.querySelectorAll("li")[1].onclick = () => {
    console.log("Mens Shirt");
};

<h3>Shirts</h3>
<ul id='list'>
    <li>Biker Jacket</li>
    <li>Mens Shirt</li>
</ul>

而且由于您似乎想console.log单击的列表项的文本内容，您可以这样做：

function showText(elem) {
  console.log(elem.innerText);
}
document.querySelectorAll("li").forEach(li => li.addEventListener("click", () => showText(li)));

<h3>Shirts</h3>
<ul id='list'>
  <li>Biker Jacket</li>
  <li>Mens Shirt</li>
</ul>

【讨论】：

【解决方案4】：

您可以使用:nth-child(x) 伪选择器来获取位置x 的元素，如下所示：

document.querySelector("ul#list > li:nth-child(2)").onclick = () => {
    console.log("Biker Jacket");
};

<h3>Shirts</h3>
<ul id='list'>
    <li>Biker Jacket</li>
    <li>Mens Shirt</li>
</ul>

【讨论】：

【解决方案5】：

有几种选择方式：

const item = document.querySelector("ul>li:nth-child(2)")

或

const item = document.querySelectorAll('#list li')[1]

或者如果它只是您需要的任何列表中的最后一件事：

const items = document.querySelectorAll('#list li');
const item = items[items.length-1];

当您选择了您的项目后，为其添加一个点击处理程序：

item.addEventListener('click', ()=>{
  console.log(this.innerText);
});

【讨论】：