複数の画像にjQuery関数を使用する方法

Question

"imgGroup"のクラスを持つすべての画像のコレクションがあります。 各画像には、2つのボタンを含むdivがあります。これらのdivには "btnActions"というクラスが割り当てられます。私のイメージはデータベースから表示されます。

未知の量の画像がある場合、下のjQueryコードを個々の画像でどのように利用できますか？現在、画像の上にマウスを移動すると、すべての画像の「btnActions」divが表示されます（期待通りですが、必要ではありません）。

P.S - このjQuery.each関数は解決策のようですが、私の脳はそれをとてもうまく覆いません。

おかげ

$('.imgGrp').hover(function() { 
    $('.btnActions').css("display", "block"); 
}); 

Answer 1

$('.imgGrp').hover(function() { 
    $('.btnActions', $(this)).css("display", "block"); 
}); 

はonnlyあなたがホバリングしている ".btnActions" に適用されます。

Answer 2

これにはJavaScriptが必要ありません。

.imgGrp:hover .btnActions { 
    display: block; 
} 

Answer 3

このjQueryスクリプトでは、クラス「imgGroup」の項目を上回っているときに、クラス「btnActions」の項目が表示されます。マウスを動かすと、 "btnActions"クラスの項目は非表示になります。 window.loadパーツは、効果を適用する前にすべての画像がロードされるまで待つでしょう。

$(window).load(function() { 

    $(".imgGroup").hover(
     function() { 
     $(this).find("button").show(); 
     }, 
     function() { 
     $(this).find("button").show(); 
     } 
    ); 

}); 

私はそれがどうなるか教えてください！

PS：.show（）と.hide（）を.show（ 'slow'）と.hide（ 'fast'）に置き換えることで、フェードインにすることもできます。

UPDATE：

$(window).load(function() { 

    $(".imgGroup").hover(
     function() { 
     $(this).addClass("hover"); 
     $(".hover > .btnActions").show(); 
     }, 
     function() { 
     $(this).removeClass("hover"); 
     $(".hover > .btnActions").hide(); 
     } 
    ); 

}); 

は、彼らが作業している場合、私に教えてください：

ここで働くかもしれない別の方法があります。

Answer 4

このMickormickを試してみてください。

$(window).load(function() { 

    $(".imgGroup").hover(
     function() { 
     $(this).addClass("hover"); 
     $(".hover > .btnActions").show(); 
     }, 
     function() { 
     $(this).removeClass("hover"); 
     $(".hover > .btnActions").hide(); 
     } 
    ); 

});