javascript

Question

我有一个无序列表和几个 li 元素。最终，我会想要拥有以下功能。如果我点击任何 li 元素，相应的内容将出现在另一个 div 中（取决于我点击的是哪个 li）。现在我坚持对规则进行概括：

var li_group = document.getElementsByTagName('li');
// li_group produces an HTML collection, as reported in a browser:
// HTMLCollection [ <li>, <li>, <li>, <li> ]

li_group[1].addEventListener('click', function() {
    alert("hello world");
});

正如您在上面看到的，我可以做到，但是当我指定一个特定元素时，eg.li_group[0]。我将如何抽象它以便得到以下内容：单击任何 li 元素，并根据所选 li 元素的内容，在主要 div 上显示一些内容（例如，显示单击的 li 的内容主要 div.

上的元素

我希望这是有道理的。谢谢。

Answer 1

在您的点击事件中，您可以使用 'this' 关键字来访问被点击的 li。这样你可以做到：

document.getElementById('mainDiv').innerHTML = this.innerHTML

Answer 2

您可以执行以下操作

var lis = document.getElementsByTagName("li");

for (var i = 0 ; i < lis.length; i++) {

    lis[i].addEventListener('click', function(event) {
        alert(event.target.textContent);
       // over here you can set the content in main div
    });

}

javascript - 点击任意 li 元素

javascript - click on any li element

html-lists