1

htmlは次のようになります。

<div class="a_list">
  <div class="hide_list_scrollbar"></div>
</div>
<div class="a_list">
  <div class="hide_list_scrollbar"></div>
</div>

jsは次のようなものです：

$(".a_list").mouseenter(
    function(){
        $(".hide_list_scrollbar").hide();
    }
);
$(".a_list").mouseleave(
    function(){
        $(".hide_list_scrollbar").show();
    }
);

現在、マウスイベントはすべての「a_list」divで実行されています。すべての「a_list」divではなく、実際にマウスイベントをアクティブ化した特定のdivでマウスイベントを実行したいだけです。どうすればこれを達成できますか？ありがとう！

4

3 に答える 3

6

セレクターにコンテキストを追加します。下記参照、

$(".hide_list_scrollbar", this).hide();

完全なコード：

$(".a_list").mouseenter(function(){
    $(".hide_list_scrollbar", this).hide();
}).mouseleave(function(){
    $(".hide_list_scrollbar", this).show();
});

.findまたは、以下のように使用できます。

$(".a_list").mouseenter(function(){
    $(this).find(".hide_list_scrollbar").hide();
}).mouseleave(function(){
    $(this).find(".hide_list_scrollbar").show();
});

注：クエリをDOMに減らすために、呼び出しを連鎖させました。

于 2012-12-05T21:17:47.607 に答える
2

this問題のオブジェクトがどれになるかを参照してください（.hide_list_scrollbarイベントをトリガーしたdiv内のクラスのみを検索します）。

$(".a_list").mouseenter(
    function(){
        $(".hide_list_scrollbar", this).hide();
    }
);
$(".a_list").mouseleave(
    function(){
        $(".hide_list_scrollbar", this).show();
    }
);
于 2012-12-05T21:18:37.697 に答える
1

前述のように、thisそのイベントをトリガーした要素を参照するためのコンテキストとして使用します。hide_list_scrollbar次に、その要素内のdivを見つけて、非表示/表示できます。また、私はhoverそれがとの省略形であるために使用しmouseenterますmouseleave

$(".a_list").hover(
    function(){
        $(this).find('.hide_list_scrollbar').hide();
    }, 
    function(){ 
        $(this).find('.hide_list_scrollbar').show(); 
    }
);
于 2012-12-05T21:19:07.600 に答える