5

私の質問は非常に単純だと思いますが、私は JavaScript の初心者であり、探しているものが見つかりません。

マウスが nav または ul の上にあるときに、li の ID を取得しようとしています... 私の HTML 構造は次のようになります。

<nav><ul id="menu">
<li id="FirstLink">Link1</li>
<li id="SecondLink">Link2</li>
<li id="ThirdLink">Link3</li>
</ul></nav>

したがって、私の目標は、各 li でマウスオーバー (およびマウスアウト) イベントをリッスンすることですが、10 個のリスナー (5 個の li) を持つスクリプトはあまりにも汚いです...

そのため、次のようなスクリプトを考えました。

var menu = document.getElementById("menu");
menu.addEventListener('mouseover', myFunction, false);

function myFunction () {
//something that get the ID of the <li> that is currently under the mouse and can put it inside a variable as "Link1"
}

しかし、より良い解決策があれば、私はそれを知りたいです! （私は純粋なjsにとどまりたい）

4

4 に答える 4

2

ホバーされた要素の ID を取得するには、 event.targetを使用する必要があります。
そのためにeventは、関数のパラメーターとして渡す必要があります。次に、その要素の.id属性を
取得できます。

function myFunction(event) {
    show_result.innerHTML = event.target.id;
}

デモはこちら

于 2013-10-16T12:23:55.253 に答える
2 
var menu = document.getElementById("menu");
menu.addEventListener('mouseover', myFunction, false);

function myFunction (event) {
    var li = event.target;
    if( li.nodeName !== 'li' ) return;

    // do your stuff with li
}
于 2013-10-16T11:33:23.623 に答える
1

子要素のみにイベントを配置する

var menu = document.getElementById("menu");
for( var counter = 0; counter< menu.childNodes.length; counter++)
{
    menu.childNodes[ counter ].addEventListener('mouseover', function(){
      alert( "id is  " + this.id  ); 
    }, false);
}
于 2013-10-16T11:22:07.180 に答える
-1

http://jsfiddle.net/neuroflux/ssSnN/

と

$('#menu').children("li").on('mouseover', function() {
    var childID = $(this).attr("id");
    //YOUR ID WILL BE childID!
});
于 2013-10-16T11:22:23.457 に答える