Ориентация на один <li> в динамически загруженном <ul>

0

Это часть 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> жестко закодирован, но, похоже, не ссылается ни на что, как только он загружается динамически. Как я могу получить "это", чтобы ссылаться на правильный элемент?

Теги:

2 ответа

1

Вам нужно использовать .next() вместо .find() здесь, так как .productDesc является следующим непосредственным родственником вашего изображения:

$('#products ul li img').hover(function(){
    $(this).next().fadeToggle("slow");
});
  • 0
    Мне нравится теория, но она не решает проблему. хммм
0

Для этого вам необходимо использовать делегирование событий, поскольку оно создается динамически. Затем вам нужно сначала настроить таргетинг на своего родителя, тогда вы можете использовать метод .find()

$(document).on("hover","#products ul li img",function(){
  $(this).parent().find(".productDesc").fadeToggle("slow");
});
  • 0
    Приведенный выше код вызвал другие проблемы, ul не будет загружаться. Поэтому я думаю, что «это» кажется проблемой. Если я напишу следующее: $('#products').hover(function(){ console.log(this);} , вся ul возвращается на консоль. Если я пытаюсь указать $('#products ul') тогда на консоль ничего не возвращается. Как мне выбрать "ul li img"?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню