クイックビュー効果のためのjQuery - 1つの要素にイベントを結ぶ

Question

私は自分のウェブサイトに「クイックビュー」エフェクトを作成しています。誰かが自分のウェブサイト上で商品を紹介すると、画像上に「クイックビュー」ボタンが表示され、ユーザーはボタンをクリックして商品を「ズームイン」できるようになります。 jQueryを使用してマウスオーバー時に「クイックビュー」ボタンを表示することができました。マウスオーバー時に「クイックビュー」ボタンを非表示にできました。しかし、ある製品でマウスオーバー/マウスアウトすると、マウスを持っている特定の製品だけでなく、すべての製品に「クイックビュー」エフェクトが表示されます。

私の製品は、id = ProductGridのリストの中にあります。 「クイックビュー」ボタンはこのリストの中に含まれ、.quickViewのクラスを持っています。私は、AddClass（）/ RemoveClass（）関数を使ってliタグにトリガーを作成しようとしましたが、すべての製品に "クイックビュー"が表示されました。私の目標は、「クイックビュー」ボタンを上に乗せている製品に1回だけ表示することです。私が抱えている問題は、mouseverイベントがすべての要素に適用されていることです。この問題を解決する方法がわからない

私はjQueryを初めて使用しており、何か助けていただければ幸いです。

はここで、

ジョン

をいただきありがとうございます私のプロダクトのための私のHTMLです：ここでは

<ol id="productGrid">

<li><a href=""><img src=""></a><a href="" class="quickView">Quick View</a><br> <span class="brandName">Gildan</span><br> <span class="productName">Gildan Shirt</span> <br><span class="price">$20</span></li>

<li><a href=""><img src=""></a><a href="" class="quickView">Quick View</a><br> <span class="brandName">Gildan</span><br> <span class="productName">Gildan Shirt</span> <br><span class="price">$20</span></li>

は私のJavaScですクイックビューボタンのRIPT/jQueryの：

$('#productGrid li').mouseover(function() {

$(this).addClass('trigger'); // add class trigger to li element

$('.trigger').mouseover(function() { // shows quickView
$('.quickView').show();
}); // end trigger mouseover
}); // end #productGrid li mouse over

$('#productGrid li').mouseout(function() {

$('.trigger').mouseout(function() { // hides quickView
$('.quickView').hide();
});// end trigger mouseout

$('#productGrid li').removeClass('trigger');

}); // end #productGrid li mouse out

Answer 1

カップルの事：

1. 他のマウスオーバーハンドラの外側で$('.trigger').mouseover()（およびmouseout()）ハンドラを移動したい場合は、毎回リバインドします。それらを一度定義するだけです。編集：実際には、私はなぜ動的にそのtriggerクラスを追加しているのか分かりません。ちょうどあなたのhtmlで始めるか、liホバリングのquickViewを表示してください。

2. すべてが表示されている理由は、$('.quickView').show()です。そのステートメントでは、最も近いものだけでなく、quickViewクラスを持つすべての要素を選択しています。 quickView要素はli要素内にあるため、その要素を取得する必要があります。

   $(this).parents(".li").find(".quickView").show();