如何使用 javascript onclick console.log 第二個 li 元素

Question

<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");
};

Answer 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>

Answer 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>

Answer 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>

Answer 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>

Answer 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);
});