jQuery多条件筛选如何实现


Posted in Javascript onNovember 04, 2015

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

jQuery多条件筛选如何实现

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

<ul class="select">  
    <li class="select-list">  
      <dl id="select1">  
        <dt>上装:</dt>  
        <dd class="select-all selected"><a href="#">全部</a></dd>  
        <dd><a href="#">针织衫</a></dd>  
        <dd><a href="#">毛呢外套</a></dd>  
        <dd><a href="#">T恤</a></dd>  
        <dd><a href="#">羽绒服</a></dd>  
        <dd><a href="#">棉衣</a></dd>  
        <dd><a href="#">卫衣</a></dd>  
        <dd><a href="#">风衣</a></dd>  
      </dl>  
    </li>  
    <li class="select-list">  
      <dl id="select2">  
        <dt>裤装:</dt>  
        <dd class="select-all selected"><a href="#">全部</a></dd>  
        <dd><a href="#">牛仔裤</a></dd>  
        <dd><a href="#">小脚/铅笔裤</a></dd>  
        <dd><a href="#">休闲裤</a></dd>  
        <dd><a href="#">打底裤</a></dd>  
        <dd><a href="#">哈伦裤</a></dd>  
      </dl>  
    </li>  
    <li class="select-result">  
      <dl>  
        <dt>已选条件:</dt>  
        <dd class="select-no">暂时没有选择过滤条件</dd>  
      </dl>  
    </li>  
  </ul>

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

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

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如何实现多条件筛选功能,希望对大家的学习有所帮助。

Javascript 相关文章推荐
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
node.js调用C++开发的模块实例
Jul 03 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
JS跨域请求外部服务器的资源
Feb 06 Javascript
javascript 组合按键事件监听实现代码
Feb 21 Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
Aug 20 Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 Javascript
javascript自定义右键菜单插件
Dec 16 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 #Javascript
js数组去重的5种算法实现
Nov 04 #Javascript
解决js图片加载时出现404的问题
Nov 30 #Javascript
jquery实现的点击翻书效果代码
Nov 04 #Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 #Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 #Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 #Javascript
You might like
一个PHP+MSSQL分页的例子
2006/10/09 PHP
PHP+APACHE实现用户论证的方法
2006/10/09 PHP
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
javascript静态的url如何传递
2007/05/03 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
jquery html添加元素/删除元素操作实例详解
2020/05/20 jQuery
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
Vue实现购物车基本功能
2020/11/08 Javascript
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
python对数组进行反转的方法
2015/05/20 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
下载官网python并安装的步骤详解
2019/10/12 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
python3处理word文档实例分析
2020/12/01 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
Html5新增标签有哪些
2017/04/13 HTML / CSS
2013年保送生自荐信格式
2013/11/20 职场文书
教育孩子心得体会
2014/01/01 职场文书
班组长岗位职责范本
2014/01/05 职场文书
电子信息科学专业自荐信
2014/01/30 职场文书
小学敬老月活动方案
2014/02/11 职场文书
贺卡寄语大全
2014/04/11 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
《圆的面积》教学反思
2016/02/19 职场文书