javascript - 如何创建一个处理程序，该处理程序将返回列表元素 'ID' Clicked 的 'LI'

Question

我正在尝试创建一个处理程序，它将返回单击的列表元素的“ID”。我尝试了很多变体(有或没有 For 循环)，但我似乎无法使其工作。感谢您的帮助。

脚本

function getItems () {
    var cList = document.getElementById("cMenu");
    var cItems = cList.getElementsByTagName("LI");

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

        cItems[i].onclick = function(){
            var theId = this.id;
        };
    }
    console.log(theId);
}

HTML 源代码

<ul id="cMenu">
  <li>
    Parent item 1
    <ul>
      <li id="item1">Child item 1</li>
      <li id="item2">Child item 2</li>
    </ul>
  </li>
  <li>
    Parent item 2
    <ul>
      <li id="item3">Child item 3</li>
      <li id="item4">Child item 4</li>
    </ul>
  </li>
</ul>

Answer 1

将 console.log(theId) 移至 onclick 函数中，并确保调用 getItems()，以便它运行一次以进行设置一切顺利。

jsFiddle

function getItems () {
    var cList = document.getElementById("cMenu");
    var cItems = cList.getElementsByTagName("LI");

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

        cItems[i].onclick = function(){
            var theId = this.id;
            console.log(theId);
        };
    }
}
getItems();