0

私は div タグ (id=div_1) を持っています。このタグにはいくつかの隣接要素があります。このタグの moseout の後、マウスはすでに他の要素の上にありますよね? タグのonmouseout div_1、アラート id 要素、現在マウスオーバーが必要ですが、これをどのように作成しますか?

<div id="div_1" style="width: 100px; height: 100px; background-color: #090"></div>
<div id="div_2" style="width: 100px; height: 100px; background-color: #900"></div>
4

2 に答える 2

2

アップデート

コメントで、あなたは言います

私はid他の要素が必要です、その上に今マウスオーバーしています

それは別の質問です。divそのためには、マウスが離れたことを知ることと、マウスが別の場所に入ったことを知ることの組み合わせが必要になります。私はおそらく次のようにmouseleaveとの組み合わせを使用しmouseoverます：

$("#div_1").mouseleave(function() {
    // We're leaving the div, set up to capture mouseover
    $("....selector for a container of these elements...").one("mouseover", function(e) {
        // Get the ID of the bottommost element
        console.log(e.target.id);

        // Or alternately, in case it doesn't have one
        var elementWithID = $(e.target).closest('[id]');
        if (elementWithID[0]) {
            console.log(elementWithID[0].id);
        }
    });
});

しかし、私は、根底にある要件を実現するための別の方法を考え出すために、本当に、本当に一生懸命努力したいと思います。

元の答え：

短いバージョン：

$("#div_1").mouseout(function() {
    alert(this.id); // But I'd avoid alert if I were you, perhaps console.log?
});

しかし、読んでください...

長いバージョン：

jQueryを使用してイベントハンドラーを設定する場合、ハンドラーが呼び出されると、thisはイベントをフックしたDOM要素への参照であり、もちろん属性idの反映プロパティidです。

mouseout ただし、バブルを覚えておいてください。そうすればmouseout、マウスが自分自身（その子孫のいずれか）内にある要素を離れるときはいつでも、それ自体divを離れていなくても、イベントを受け取ることができます。子孫要素を残さずdivに残したい場合は、代わりに使用してください（元々はIEのみですが、jQueryはクロスブラウザーを提供します）。divmouseleave

これを一般化して、たとえば、クラスを持つすべてのdivにした場合foo：

$("div.foo").mouseout(function() { // Or, of course, mouseleav
    console.log(this.id);
});
于 2012-10-22T13:11:18.083 に答える
2

これは、あなたの望むことですか？

HTML

<div id="container">
    <div id="1">1</div>
    <div id="2">2</div>
</div>

JavaScript

$('#container > div').mouseover( function() {
    alert ($(this).attr('id'));
});​

デモ

http://jsfiddle.net/CFtP5/

編集

子を選択するために親要素を使用しない場合。次のように単純にワイルドカードを使用します。

JavaScript

$("[id^=div]").mouseover (function() {
    alert ($(this).attr('id'));
});​

HTML

<div id="div_1">1</div>
<div id="div_2">2</div>
<div id="div_3">3</div>

デモ

http://jsfiddle.net/VPm8M/

于 2012-10-22T13:12:36.217 に答える