jquery - jQuery函数查找类和fadeToggle另一个具有相同类的div

Question

我正在电子商务网站上工作，我正在尝试制作它，以便在单击显示类别名称的列表项时，相关的产品类别（在“产品显示”div 中）将淡出切换。我希望淡入淡出的列表项和 div 都分配了相同的类名。

我怎么能通过 jQuery 做到这一点？

<ul id="product-filter">
 <li class="cat_1">category 1</li>  // Clicking on this li item...
 <li class="cat_2">category 2</li>
</ul>

<div id="product-display">
  <div class="cat_1">  // fadeToggles this div
    <img src="image1.gif">
</div>

  <div class="cat_2">
    <img src="image2.gif">
  </div>
</div>

Answer 1

也许是这样的：

$('#product-filter li').click(function() {
    $('#product-display div.' + $(this).attr('class')).fadeToggle();
});

也就是说，单击其中一个 li 元素获取其类，然后在“product-dislay”中选择适当的匹配项。

话虽如此，如果是我的代码，我不会使用类来链接项目，因为它使得将其他类应用于 li 元素有点困难——我可能会使用数据属性。对于产品 div，我可能会使用 id，因为它们似乎是独特的项目：

<ul id="product-filter">
   <li data-category="cat_1">category 1</li>
   ...

<div id="product-display">
    <div id="cat_1">

$('#product-filter li').click(function() {
    $('#' + $(this).attr('data-category')).fadeToggle();
});

此外，我可能会将锚元素放在 li 元素中，因为这样可以通过键盘“点击”它们（对于不能或不使用鼠标或其他指针设备的用户）。

Answer 2

$('#product-filter li[class^=cat_]').click(function()
{
    $('#product-display div[class=' + $(this).attr('class') + ']')
        .fadeIn(); // or whatever fade logic you need
});

Answer 3

这个怎么样：

$('#product-filter').find('li').each(function() {
    $(this).click(function() {
        var item = $(this).attr('class');
        $('#product-display').find('.'+item).fadeToggle();
    });
});