Это часть B к предыдущему вопросу: Ориентация единственного <li> внутри <ul>
В предыдущем вопросе я показывал описание продукта путем таргетинга на один <li>
в неупорядоченный список. Это очень хорошо работало, когда <ul>
был жестко закодирован в моем html. Однако теперь я динамически загружаю в <ul>
на основе элемента навигации, на который пользователь нажимает (показывает все продукты под этой категорией). Когда я динамически загружаюсь в <ul>
я больше не могу настроить таргетинг на отдельные элементы списка.
ЯШ:
$('#products ul li img').hover(function(){
$(this).find(".productDesc").fadeToggle("slow");
});
Если я выберу "ul li img", все продукты будут показывать свои описания одновременно, но когда я попытаюсь настроить таргетинг на отдельный элемент, описания вообще не появятся. Любые идеи, как это исправить? (также пытались '#products ul'
, '#products li'
, '#products li img'
, '#products ul li'
и почти каждая перестановка)
html (один из <ul>
будет загружен в div под названием "products"):
<div id='products'> <!-- ul is loaded here --> </div>
<ul id='category1'>
<li>
<img src='images/products/product1.jpg' />
<div class='productDesc'>
<p>description here</p>
</div>
</li>
<li>
<img src='images/products/product2.jpg' />
<div class='productDesc'>
<p>description here</p>
</div>
</li>
</ul>
<ul id='category2'>
<li>
<img src='images/products/product3.jpg' />
<div class='productDesc'>
<p>description here</p>
</div>
</li>
<li>
<img src='images/products/product4.jpg' />
<div class='productDesc'>
<p>description here</p>
</div>
</li>
</ul>
и т.д...
****Обновить****
Проблема, похоже, заключается в "этом". "this" относится к элементу списка, который зависает, когда <ul>
жестко закодирован, но, похоже, не ссылается ни на что, как только он загружается динамически. Как я могу получить "это", чтобы ссылаться на правильный элемент?
Вам нужно использовать .next() вместо .find()
здесь, так как .productDesc
является следующим непосредственным родственником вашего изображения:
$('#products ul li img').hover(function(){
$(this).next().fadeToggle("slow");
});
Для этого вам необходимо использовать делегирование событий, поскольку оно создается динамически. Затем вам нужно сначала настроить таргетинг на своего родителя, тогда вы можете использовать метод .find()
$(document).on("hover","#products ul li img",function(){
$(this).parent().find(".productDesc").fadeToggle("slow");
});
$('#products').hover(function(){ console.log(this);}
, вся ul возвращается на консоль. Если я пытаюсь указать $('#products ul')
тогда на консоль ничего не возвращается. Как мне выбрать "ul li img"?