本文实例讲述了jquery实现多条件筛选特效。分享给大家供大家参考。具体如下：
我们在电商平台购买商品时，在商品列表页根据品牌、款式、价格范围等条件进行筛选查询，当点击某个条件时，在页面上会显示用户所选择的条件集合，并且将对应的符合条件的商品信息展示出来。那么今天我们使用jquery来实现这一前端效果。
运行效果图：
html
首先，我们将查询条件分类，在页面中布置条件容器li.select-list和已选择的条件容器div.select-result。
上装： 全部 针织衫 毛呢外套 t恤 羽绒服 棉衣 卫衣 风衣 裤装： 全部 牛仔裤 小脚/铅笔裤 休闲裤 打底裤 哈伦裤 已选条件： 暂时没有选择过滤条件
布置好内容后，给页面内容加上css样式以及加载相关js。

jquery
当用户点击任意条件时，标记当前选中状态，相邻条件取消选中状态，并且更新已选条件容器内容，请看代码：
$(document).ready(function() { $(#select1 dd).click(function() { $(this).addclass(selected).siblings().removeclass(selected); if ($(this).hasclass(select-all)) { $(#selecta).remove(); } else { var copythisa = $(this).clone(); if ($(#selecta).length > 0) { $(#selecta a).html($(this).text()); } else { $(.select-result dl).append(copythisa.attr(id, selecta)); } } }); $(#select2 dd).click(function() { $(this).addclass(selected).siblings().removeclass(selected); if ($(this).hasclass(select-all)) { $(#selectb).remove(); } else { var copythisb = $(this).clone(); if ($(#selectb).length > 0) { $(#selectb a).html($(this).text()); } else { $(.select-result dl).append(copythisb.attr(id, selectb)); } } }); $(#selecta).live(click, function() { $(this).remove(); $(#select1 .select-all).addclass(selected).siblings().removeclass(selected); }); $(#selectb).live(click, function() { $(this).remove(); $(#select2 .select-all).addclass(selected).siblings().removeclass(selected); }); $(.select dd).live(click, function() { if ($(.select-result dd).length > 1) { $(.select-no).hide(); } else { $(.select-no).show(); } }); });
实际应用中，我们要结合后端程序，实现帅选条件时，页面响应的内容也会变化，有兴趣的同学可以尝试下。
以上就是本文的全部内容，告诉大家js如何实现多条件筛选功能，希望对大家的学习有所帮助。