A-A+

基于jQuery实现多条件筛选实现程序

2016年01月11日 web前端设计 暂无评论 阅读 5 views 次

按条件筛选我们许多是使用php传参数来实现了,但在当前界面我们可以使用js来实现了,下面我们来看一个基于jQuery实现多条件筛选实现程序,希望文章能够对各位带来帮助,有兴趣的可以进来看看。

我们在电商平台购买商品时,在商品列表页根据品牌、款式、价格范围等条件进行筛选查询,当点击某个条件时,在页面上会显示用户所选择的条件集合,并且将对应的符合条件的商品信息展示出来。那么今天我们使用jQuery来实现这一前端效果。

基于jQuery实现多条件筛选实现程序

HTML,首先,我们将查询条件分类,在页面中布置条件容器li.select-list和已选择的条件容器div.select-result。

  1. <ul class="select">   
  2.         <li class="select-list">   
  3.             <dl id="select1">   
  4.                 <dt>上装:</dt>   
  5.                 <dd class="select-all selected"><a href="#">全部</a></dd>   
  6.                 <dd><a href="#">针织衫</a></dd>   
  7.                 <dd><a href="#">毛呢外套</a></dd>   
  8.                 <dd><a href="#">T恤</a></dd>   
  9.                 <dd><a href="#">羽绒服</a></dd>   
  10.                 <dd><a href="#">棉衣</a></dd>   
  11.                 <dd><a href="#">卫衣</a></dd>   
  12.                 <dd><a href="#">风衣</a></dd>   
  13.             </dl>   
  14.         </li>   
  15.         <li class="select-list">   
  16.             <dl id="select2">   
  17.                 <dt>裤装:</dt>   
  18.                 <dd class="select-all selected"><a href="#">全部</a></dd>   
  19.                 <dd><a href="#">牛仔裤</a></dd>   
  20.                 <dd><a href="#">小脚/铅笔裤</a></dd>   
  21.                 <dd><a href="#">休闲裤</a></dd>   
  22.                 <dd><a href="#">打底裤</a></dd>   
  23.                 <dd><a href="#">哈伦裤</a></dd>   
  24.             </dl>   
  25.         </li>   
  26.         <li class="select-result">   
  27.             <dl>   
  28.                 <dt>已选条件:</dt>   
  29.                 <dd class="select-no">暂时没有选择过滤条件</dd>   
  30.             </dl>   
  31.         </li>   
  32.     </ul>  

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

  1. <link rel="stylesheet" type="text/css" href="css/style.css">   
  2. <script type="text/javascript" src="js/jquery.js"></script>   
  3. <script type="text/javascript" src="js/script.js"></script>  

jQuery

当用户点击任意条件时,标记当前选中状态,相邻条件取消选中状态,并且更新已选条件容器内容,请看代码:

  1. $(document).ready(function(){   
  2.     $("#select1 dd").click(function () {   
  3.         $(this).addClass("selected").siblings().removeClass("selected");   
  4.         if ($(this).hasClass("select-all")) {   
  5.             $("#selectA").remove();   
  6.         } else {   
  7.             var copyThisA = $(this).clone();   
  8.             if ($("#selectA").length > 0) {   
  9.                 $("#selectA a").html($(this).text());   
  10.             } else {   
  11.                 $(".select-result dl").append(copyThisA.attr("id""selectA"));   
  12.             }   
  13.         }   
  14.     });   
  15.        
  16.     $("#select2 dd").click(function () {   
  17.         $(this).addClass("selected").siblings().removeClass("selected");   
  18.         if ($(this).hasClass("select-all")) {   
  19.             $("#selectB").remove();   
  20.         } else {   
  21.             var copyThisB = $(this).clone();   
  22.             if ($("#selectB").length > 0) {   
  23.                 $("#selectB a").html($(this).text());   
  24.             } else {   
  25.                 $(".select-result dl").append(copyThisB.attr("id""selectB"));   
  26.             }   
  27.         }   
  28.     });   
  29.   
  30.     $("#selectA").live("click"function () {   
  31.         $(this).remove();   
  32.         $("#select1 .select-all").addClass("selected").siblings().removeClass("selected");   
  33.     });   
  34.        
  35.     $("#selectB").live("click"function () {   
  36.         $(this).remove();   
  37.         $("#select2 .select-all").addClass("selected").siblings().removeClass("selected");   
  38.     });   
  39.        
  40.     $(".select dd").live("click"function () {   
  41.         if ($(".select-result dd").length > 1) {   
  42.             $(".select-no").hide();   
  43.         } else {   
  44.             $(".select-no").show();   
  45.         }   
  46.     });   
  47.        
  48. });  

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

标签:

给我留言