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

のみを取得したい場合はid、それらすべてのリスト項目にcList > li > ul > li特定のものを追加して、親項目にイベント ハンドラーを追加しないようにすることができます。classNamelicList > 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 に答える
0

関数に移動console.log(theId)し、すべてをセットアップするために一度実行されるようにonclick呼び出してください。getItems()

jsフィドル

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

私のために働く：

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 に答える