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>

Вот мой JavaSc НИИИТ/JQuery для кнопки Quickview:

$('#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()) за пределы других обработчиков манипулятора, иначе вы будете перепроверять каждый раз. Вы хотите, чтобы те были определены один раз. edit: на самом деле, я не понимаю, почему вы динамически добавляете класс trigger вообще.Просто поместите его в свой html, чтобы начать с или показать quickView на li зависании.

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

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