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上显示一些内容（例如，在主要内容上显示单击的li元素的内容）格。

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

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

javascript - 点击任何li元素

2 个答案: