jQuery多条件筛选如何实现

时间：2016.04.20 发布人：qiyule
jQuery多条件筛选如何实现

已解决问题

谷歌qiyule用户在2016.04.20提交了关于“绿岛jQuery多条件筛选如何实现”的提问，欢迎大家涌跃发表自己的观点。目前共有1个回答，最后更新于2024-11-05T20:31:52。希望大家能够帮助她。

详细问题描述及疑问：期待您的答案，真心佩服你,谢谢 ！

希望以下的回答，能够帮助你。

第1个回答

用户名：znify7515  

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

h**TML
首先，我们将查询条件分类，在页面中布置条件容器***.select-list和已选择的条件容器***.select-result。

<ulclass="select"><liclass="select-list"><dlid="select1"><dt>上装：</dt><ddclass="select-allselecte轴各了金转完气d"><ahref="#">全部</a></dd><dd><ahref="#">针织衫</a></dd><dd><ahref="#">毛呢外套</a></dd><dd><ahref="#">T恤</a></dd><dd><ahref="#">羽绒服</a></dd><dd><ahref="#">棉衣</a></dd><dd><ahref="#">卫衣</a></dd><dd><ahref="#">风衣</a></dd></dl></li><liclass="select-list"><dlid="select2"><dt>裤装：</dt><ddclass="select-allselected"><a物href="#">全部</a></dd><dd><ahref="#">牛仔裤</a></dd><dd><ahref="#">小脚/铅笔裤</a></dd><dd><ahref="#">休闲师致属究述盟把裤</a></dd><dd><ahref="#">打底裤</a></dd><dd><ahref="#">哈伦裤</a></dd></dl></li><liclass="select-result"><dl><dt>已选条件：</dt><ddclass="select-no">暂时没有选择过滤条件</dd></dl></li></ul>

布置好内容后，给页面内容加上css样式以及加载相关js。

<linkrel="stylesheet"type="text/css"href="css/style.css"><scripttype="text考内/j**ascript"src="js/jquery.js"></script><scripttype="text/j**ascript"src="js/script.js"></script>

jQuery
当用户点击任意条件时，标记当前选中状态均袁以须打浓首越，相邻条件取消选中状态，并且更新已选条件容器内容，请看代码：

$(document).ready(function(){$("#select1dd").click(function(){$(this).addClass("selected").siblings().removeCl阶开更双谓世ass("selected");if($(this).土拉属厚凯走南全美王况hasClass("select-all")){$("#selectA").remove();}else{varcopyThisA=$(this).clone();if($("#selectA").leng属待菜福耐弦th>0){$("#selectAa").html($(this).text());}else{$(".select-resultdl").append(copyThisA.attr("id","sel乡ectA"));}}});$("#select2dd").click(function(){$(this).addClass("selected").siblings().removeClass("se扩短提lected");if($(this).hasClass("select-all")块粉圆){$("#selectB").remove();买宜}else{varcopyThisB=$(this).clo不防短ne();if($("#selectB").length>0){$("#selectBa")材握曲围细载叶思.html($(this)厚.text());速地已坚额规后燃龙始左}else{$(".sele船ct-resultdl").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");});$(".selectdd").live("click",function(){if($(".select-resultdd").length>1){$(".select-no").hide();}else{$(".select-no").show();}});});

实际应用中，我们要结合后端程序，实现帅选条件时，页面响应的内容也会变化，有兴趣的同学可以尝试下。

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