jQuery для эффекта быстрого просмотра - привязать событие к одному элементу

Question

Я создаю эффект «быстрого просмотра» для моего сайта. Когда кто-то наводит курсор мыши на товар на моем веб-сайте, у меня появляется кнопка «Быстрый просмотр», которая появляется над изображением, чтобы пользователи могли нажимать на кнопку и «увеличивать» продукт. Я смог использовать jQuery, чтобы показать кнопку «быстрого просмотра» при наведении мыши, и мне удалось скрыть кнопку «быстрого просмотра» при наведении мыши. Однако при наведении курсора мыши на один продукт эффект «быстрого просмотра» отображается над ВСЕМИ продуктами, а не только над конкретным продуктом, на который наведена мышь.

Мои продукты находятся внутри списка с id = ProductGrid. Кнопка «Быстрый просмотр» содержится в этом списке и имеет класс .quickView. Я попытался создать триггер в теге li с помощью функций AddClass () / RemoveClass (), но это все равно привело к «быстрому просмотру» всех продуктов. Моя цель - показать кнопку «Быстрый просмотр» только один раз на продукте, который находится над ним. Я понимаю, что у меня проблема в том, что событие mousever применяется ко ВСЕМ элементам. Не уверен, как решить эту проблему.

Я новичок в jQuery, и любая помощь будет принята с благодарностью.

Спасибо,

Jon

Вот мой 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>

Вот мой JavaScript / 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.

2. Причина, по которой вы видите их всех, $('.quickView').show().С помощью этого оператора вы выбираете ВСЕ элементы класса quickView, а не только ближайший.Поскольку элемент quickView находится внутри вашего элемента li, вам необходимо получить только этот элемент.

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