1

JavaScriptやjQueryはあまり得意ではありませんが、<div>要素にカーソルを合わせたときに表示される画像を取得しようとしています。問題は、それが他のものでも起こっているということです。

$(document).ready(function () {

    $("#event .event").hover(function () {
        $(".event img").show("slow");
    },
    $(".event img").mouseout(function () {
        $(".event img").hide("slow");
    }));

});

HTMLコード：

<div id="event">
    <div class="event">
         <h4>name1</h4>

        <p>some text1</p>
        <img style='position:relative; display:none;' src='img1' alt='' />
    </div>
    <div class="event">
         <h4>name2</h4>

        <p>some text2</p>
        <img style='position:relative; display:none;' src='img2' alt='' />
    </div>
</div>

しかし、画像は両方に表示されます。5つある場合は、5つすべてに表示されます。

4

3 に答える 3

1

関数の2番目のパラメーターは$、コンテキストを定義するためによく使用されます。つまり、セレクターは特定の要素またはセレクターに関連して使用されます。

$(".event") // finds all .event elements
$(".event", this) // finds all .event elements within 'this'

これを念頭に置いて、.event現在入力または存在している要素内を調べて適切な画像を見つけるようにコードを変更できます。

​$("#event .event").on({
    mouseenter: function(){
        $("img", this).show();
    },
    mouseleave: function(){
        $("img", this).hide();
    }
});​​​

#event .eventこれにより、セレクターに一致するすべての要素にロジックがバインドされます。これらのそれぞれには、それらのイベントにバインドされたハンドラーがmouseenterありmouseleaveます。セレクターによって一致する要素の1つにカーソルを合わせると、thisキーワードを使用してその特定の要素を参照します。

ページの最初の#event .event要素を入力するthisと、その要素を参照します。同様に、その要素を終了する場合は、終了するその要素をthis参照します。この応答の最初のポイントを思い出してください。つまり、最初にまたはイベントを発生さ$("img", this)せる要素内のすべての画像をターゲットにします。mouseentermouseleave

また、.hover();の使用を再確認してください。このメソッドは2つのパラメーター、関数を取ります。これらは、それぞれ、mouseenterとmouseleaveのときに呼び出されます。

$("#event .event").hover( showImages, hideImages );

function showImages () {
    $("img", this).show();
}

function hideImages () {
    $("img", this).hide();
}

.hoverまたは、それらを匿名関数としてメソッド内に直接配置することもできます。

$("#event .event").hover(
    function(){ $("img", this).show(); }, 
    function(){ $("img", this).hide(); }
);
于 2012-11-10T18:46:16.780 に答える
0

すべての画像を非表示にして表示しているので、thisキーワードを使用して、すべてではなく現在の要素のみをターゲットにする必要があります。これは、トグルを使用した別の簡単なソリューションです。

$(document).ready(function(){
    $("#event .event").on('mouseenter mouseleave', function() {
            $('img', this).toggle(e.type=='mouseenter');
    });
});
于 2012-11-10T18:42:26.503 に答える
0

これを試して。IMOこのソリューションは理解しやすいです。

$(document).ready(function () {
    $("#event .event").hover(function () {
        $(this).find('img').show();
    }, function(){
       $(this).find('img').hide();
    });
});
于 2012-11-10T19:25:22.317 に答える