3

ユーザーからの投稿をページに表示します。クラス名「posts」のメインの親divがあり、各投稿はクラス名「row」のdivに出力されます。したがって、div.posts 内にはたくさんの div.row があります。それぞれこんな感じ。

<div class="row clearfix">
    <div class="left-column">
        <img src="..." title="" />
    </div>
    <div class="main-column">
        <div class="row-text">Post Text...</div>
        <div class="row-date">Posted Date...</div>
    </div>
    <div class="actions-column">
        <a href="#">Link</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3 etc.</a>
    </div>
</div>

CSS を介して、actions-column はデフォルトで display:none に設定されています。ユーザーのマウスオーバーが投稿 (div.row) の場合、アクション列を表示したいと思います。私の最初の方法は、各行に対してもマウスオーバーを設定することでした。これは、ブラウザーに負担をかけ、速度を低下させていました。私はいくつかの調査を行い、イベント委任に出くわし、試してみることにしました。これまでのところ、どの行がターゲットにされているかを特定できますが、クラス 'actions-column' でその子 div をターゲットにする方法がわかりません。

これまでのコード...

$(window).load(function(){

    $('.posts').mouseover(function(e){
        var $row, $tgt = $(e.target);

        if ($tgt.hasClass("row")) {
            $row = $tgt;
        } else { 
            if ($tgt.parent().parent().hasClass('row'))
                $row = $tgt.parent().parent();

            else if ($tgt.parent().hasClass('row'))
                $row = tgt.parent();    

            else
                return false;       
        }

        //code here to select div.actions-column and show it

    });

    $('.posts').mouseover(function(e){
        var $row, $tgt = $(e.target);

        if ($tgt.hasClass("row")) {
            $row = $tgt;
        } else { 
            if ($tgt.parent().parent().hasClass('row'))
                $row = $tgt.parent().parent();

            else if ($tgt.parent().hasClass('row'))
                $row = tgt.parent();    

            else
                return false;       
        }

        //code here to select div.actions-column and hide it

    });

});
4

6 に答える 6

6

使用できますlive：

$('div.row').live('mouseover', function() {
    $(this).find('div.actions-column').show();
}).live('mouseout', function() {
    $(this).find('div.actions-column').hide();
});

ドキュメントの注意事項として：

「ライブ」イベントをバインドすると、ページ上の現在および将来のすべての要素にバインドされます (イベント委任を使用)。

さらにいくつかのメモ：

  • $(window).load()イベントを利用されているようです。あなたはおそらくしたいです$(document).ready()
  • 2回クエリするのではなく、jQueryのチェーン機能を利用する$('.posts')必要があります.2番目の呼び出しを最後に追加するだけです（上記の例で行ったように）-これははるかに効率的で、1つのセレクタに複数のことを行うための推奨される方法jQueryで。
  • HTML ツリーの次の階層を見つけるために記述しようとしているコードは、jQuery のメソッドdiv.rowによって既に実装されています。closest()

あなたはそれでこのようなことをすることができます:

$('div.posts').hover(function(e) {
    var row = $(e.target).closest('div.row');
    $row.find('div.actions-column').show();
}, function(e) {
    var row = $(e.target).closest('div.row');
    $row.find('div.actions-column').hide();
});

ただし、live上で示した機能のため、これは必要ありません。

  • クエリの効率について考えてください。投稿のクラスが1 つしかない場合は<div>、id 属性を与えることを検討してください。これは、ドキュメント内の要素を選択する最も効率的な方法であり、1 回しか出現しない要素に適用するのが理にかなっています。
  • クラスごとに要素をクエリするときはいつでも、クラスの前にタグ名を含めることをお勧めします (もちろん、それが多くの異なるタグにあると予想される場合を除きます) - したがって、 を探す代わりに、 を探す.row習慣をつけてください。div.row代わりは。それはただ速いです。
于 2009-06-15T20:25:22.497 に答える
2

これはすでに回答されていることを認識していますが、jQuery 1.5 では明示的な「デリゲート」メソッドが追加されているため、これがより良い解決策になる可能性があります。このスレッドは検索で出てくるので、この回答を検索している他の人のために投稿します。(さらに簡潔にするために、mouseenter/mouseleave + show()/hide() の代わりに「hover」と「toggle()」を使用してリファクタリングします)。

http://api.jquery.com/delegate/

$('div.row').live('mouseover', function() {
    $(this).find('div.actions-column').show();
}).live('mouseout', function() {
    $(this).find('div.actions-column').hide();
});

jQuery 1.5 以降では、次のように記述できます。

$(".posts").delegate("div.row", "hover", function(){
    $(this).find("div.actions-column").toggle();
});

実際に見てみましょう:

http://jsfiddle.net/SM6Jv/

ここに画像の説明を入力

于 2011-02-25T16:48:59.860 に答える
1

jQueryのlive()メソッドを使ってみてください。イベント委任を内部的に使用してアクションを実行するため、イベント委任を適切に設定することについて考える必要さえありません。

$('.row').live('mouseover', function() {
    $(this).find('.actions-column').show();
}).live('mouseout', function() {
    $(this).find('.actions-column').hide();
});
于 2009-06-15T20:27:45.767 に答える
0

本当にjQuery でこれをやりたいのでない限り、もちろん何かは CSS の行で管理できます:

div.row:hover div.actions-column { display:block; }
于 2009-06-29T11:09:40.100 に答える
0

?:

$('div.actions-column', $row).show(); // .hide()

アップデート：

jQuery closest([expr])を使用することをお勧めします。

var $tgt = $(e.target);
var $row = $tgt.closest('.row');

それ以外の：

var $row, $tgt = $(e.target);

if ($tgt.hasClass("row")) {
    $row = $tgt;
} else { 
    if ($tgt.parent().parent().hasClass('row'))
        $row = $tgt.parent().parent();
    else if ($tgt.parent().hasClass('row'))
        $row = tgt.parent();    
    else
        return false;           
}
于 2009-06-15T20:24:05.620 に答える
0

試す：

$row.find (".actions-column").hide ();

と

$row.find (".actions-column").show();
于 2009-06-15T20:25:02.760 に答える