javascript-单击任何li元素

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

如您在上面看到的，我可以做到，但是当我指定一个特定元素时，例如li_group [0]。 我将如何对其进行抽象，所以得到以下内容：单击任何li元素，然后基于所选li元素的内容，在主div上显示某些内容（例如，在main div上显示单击的li元素的内容div。

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

Answer 1

您可以执行以下操作

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

}

Answer 2

在您的点击事件中，您可以使用'this'关键字来访问被点击的li。 这样，您可以执行以下操作：

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