本文实例讲述了jquery实现多条件筛选特效。分享给大家供大家参考。具体如下：我们在电商平台购买商品时，在商品列表页根据品牌、款式、价格范围等条件进行筛选查询，当点击某个条件时，在页面上会显示用户所选择的条件集合，并且将对应的符合条件的商品信息展示出来。那么今天我们使用jQuery来实现这一前端效果。运行效果图：

超文本标记语言首先，我们将查询条件分类，在页面中布置条件容器李。选择列表和已选择的条件容器div。选择-结果。

ul class=' select ' Li class=' select-list ' dl id=' select 1 ' dt上装：/dt DD class=' select-all selected ' a href=' # '全部/a/dd dda href='# '针织衫/a/dd dda href='# '毛呢外套/a/dd dda href='#'T恤/a/dd dda href='# '羽绒服/a/dd dda href='# '棉衣/a/dd dda href='# '卫衣/a/dd dda href='# '风衣/a/DD/dl/Li Li class='选择列表' dl id='选择2 ' dt裤装：/dt DD class=' select-all selected ' a href=' # '全部/a/dd dda href='# '牛仔裤/a/dd dda href='# '小脚/铅笔裤/a/dd dda href='# '休闲裤/a/dd dda href='# '打底裤/a/dd dda href='# '哈伦裤/a/dd /dl /li li class='选择-结果dl dt已选条件：/dt dd class='select-no '暂时没有选择过滤条件/dd /dl /li /ul布置好内容后，给页面内容加上钢性铸铁样式以及加载相关js。

链接rel='样式表type=' text/CSS ' href=' CSS/style。CSS ' script type=' text/JavaScript ' src=' http : js/jquery。js/script脚本类型=' text/JavaScript ' src=' http : js/script。js '/脚本jquery当用户点击任意条件时，标记当前选中状态，相邻条件取消选中状态，并且更新已选条件容器内容，请看代码：

$(文档)。ready(function() { $('#select1 dd ')).单击(function() { $(this)).addClass(')选定')。兄弟姐妹()。removeClass(“”选定');if ($(this).有类('全选'){ $(' # selectA ').移除();} else { var copyThisA=$(this).clone()；if ($('#selectA ').长度0) { $('#selectA a ').html($(this).text())；} else { $(' .选择结果dl’).追加(copyThisA.attr('id '，' SelectA ')；} } });$('#select2 dd ').单击(function() { $(this)).addClass(')选定')。兄弟姐妹()。removeClass(“”选定');if ($(this).有类('全选'){ $(' # SelectB ').移除();} else { var copyThisB=$(this).clone()；if ($('#selectB ').长度0) { $('#selectB a ').html($(this).text())；} else { $(' .选择结果dl’).追加(copyThisB.attr('id '，' SelectB ')；} } });$('#selectA ').live('click '，function() { $(this).移除();$('#select1 .全选')。addClass(')选定')。兄弟姐妹()。removeClass(“”选定');});$('#selectB ').live('click '，function() { $(this).移除();$('#select2 .全选')。addClass(')选定')。兄弟姐妹()。removeClass(“”选定');});$('.选择DD ').live('click ')，function() { if ($(').选择结果dd ').长度1) { $('。选择-否')。hide()；} else { $(' .选择-否')。show()；} });});实际应用中，我们要结合后端程序，实现帅选条件时，页面响应的内容也会变化，有兴趣的同学可以尝试下。

以上就是本文的全部内容，告诉大家射流研究…如何实现多条件筛选功能，希望对大家的学习有所帮助。