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 相关文章推荐
JavaScript中的事件处理
Jan 16 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
在JavaScript并非所有的一切都是对象
Apr 11 Javascript
iframe实用操作锦集
Apr 22 Javascript
Javascript核心读书有感之类型、值和变量
Feb 11 Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
vue基于viewer实现的图片查看器功能
Apr 12 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
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
微信小程序解除10个请求并发限制
2018/12/18 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
Django 请求Request的具体使用方法
2019/11/11 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
浅谈Python 参数与变量
2020/06/20 Python
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
印度购物网站:TATA CLiQ
2017/11/23 全球购物
前台领班岗位职责
2013/12/04 职场文书
婚礼主持词
2014/03/13 职场文书
电工实训心得体会
2016/01/14 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android