1

我正在尝试创建一个处理程序，它将返回单击的列表元素的“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>
4

3 回答 3

0

为我工作：

http://jsfiddle.net/5XSUG/

var listItems = document.getElementsByTagName('li');

for(var i = 0; i < listItems.length; i++)
{
    listItems[i].onclick = function(e)
    {
        e.stopPropagation();
        window.alert(e.target.id);
    }
}
于 2013-03-29T16:04:07.090 回答
0

进入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();
于 2013-03-29T15:54:42.783 回答
0

如果您只想获得 的id，cList > li > ul > li那么您可以向所有这些列表项添加某个className，以避免将事件处理程序添加到父li项，cList > li例如：

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

那么您可以使用此代码来获取id单击li项目的：

var cList = document.getElementById("cMenu"),
    cItem = cList.getElementsByTagName("li");

for (var i in cItem) {
    if (cItem[i].className == "item") {
        cItem[i].onclick = function (event) {
            event.stopPropagation();
            var elm = event.currentTarget || event.srcElement;
            console.log(elm.id);
        }
    }
}

请注意，您不必包装代码function以便它在文档加载时运行，您只需将其添加到</body>标签之前的正文部分

演示

于 2013-03-29T16:57:28.870 回答