Question

我正在开发电子商务网站，我正在尝试制作它，以便在点击显示类别名称的列表项时，相关的产品类别（在“product-display”div中）将为fadeToggle。我希望fadeToggle的列表项和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[class^=cat_]').click(function()
{
    $('#product-display div[class=' + $(this).attr('class') + ']')
        .fadeIn(); // or whatever fade logic you need
});

Answer 2

也许是这样的：

$('#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 3

这个怎么样：

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

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

3 个答案: