对于我正在创建的动态显示产品的页面,我需要创建一个排序的产品过滤器。单击 ul#product-filter 中的 li 元素将显示/隐藏相应的 div(产品类别)。
查看我的 HTML 代码:
<ul id="product-filter">
<li class="cat_1">category 1</li>
<li class="cat_2">category 2</li>
</ul>
<div id="product-display">
<div class="cat_1">
<img src="image1.gif">
</div>
<div class="cat_2">
<img src="image2.gif">
</div>
</div>
目前我的 jQuery 解决方案是:
$('#products-filter li[class^=cat_]').click(function() {
$('#products-display div[class=' + $(this).attr('class') + ']').fadeToggle();
});
但是,这只会淡化切换所选类别(产品类别 div)。客户已请求单击初始类别 ('li') 将隐藏所有其他“产品类别” div 并仅显示所选内容。单击另一个('li')类别也将显示第二个产品 div,仍显示先前选择的.. 等等。重新单击相同的 'li' 项目将再次隐藏类别.. 等等。
“重置”按钮也是理想的选择。
任何建议将不胜感激。