Question

这是上一个问题的B部分： Targeting a single <li> within <ul>

在上一个问题中，我通过定位无序列表中的单个<li>来显示产品说明。当我的html中<ul>被硬编码时，这非常有用。但是，现在我根据用户点击的导航元素动态加载<ul>（显示该类别下的所有产品）。当我在<ul>中动态加载时，我似乎无法再定位各个列表项。

JS：

$('#products ul li img').hover(function(){
   $(this).find(".productDesc").fadeToggle("slow");
});

如果我取出＆＃34; ul li img＆＃34;，所有产品将同时显示其描述，但是当我尝试定位单个元素时，则根本不会出现任何描述。任何想法如何解决这一问题？（还尝试了'#products ul'，'#products li'，'#products li img'，'#products ul li'以及几乎所有排列

html （其中一个<ul>将被加载到名为＆＃34; products＆＃34;）的div中：

<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>

等...

**** ****更新

问题似乎在于＆＃34;这个＆＃34;。＆＃34;这＆＃34;是指<ul>被硬编码时所悬停的列表项，但在动态加载后似乎并未引用任何内容。我怎样才能得到这个＆＃34;这个＆＃34;引用适当的元素？

Answer 1

您需要在此处使用 .next() 而不是.find()，因为.productDesc是您图片的下一个直接兄弟：

$('#products ul li img').hover(function(){
    $(this).next().fadeToggle("slow");
});

Answer 2

您需要为此动态创建事件委派。然后，您必须首先定位其父级，然后才能使用.find()方法

$(document).on("hover","#products ul li img",function(){
  $(this).parent().find(".productDesc").fadeToggle("slow");
});

在动态加载的<ul> </ul> </li>中定位单个<li>

2 个答案: