原生JS实现多条件筛选


Posted in Javascript onAugust 19, 2020

本文实例为大家分享了原生JS实现多条件筛选的具体代码,供大家参考,具体内容如下

我在学JS初始看到的教程基本都是JS二级联动查询、三级联动查询;如下图:

原生JS实现多条件筛选

但有时并不需要级联查询,如购买商品时:

原生JS实现多条件筛选

今天我以慕课网前端样式作为参考做了下面的Demo,基于原生JS

<div id="direction">
 <strong>方向:</strong>
 <span class="active">全部</span>
 <span>前端</span>
 <span>后台</span>
 <span>数据库</span>
 <span>UI设计</span>
</div>
<div id="category">
 <strong>分类:</strong>
 <span class="active">全部</span>
 <span>HTML/CSS</span>
 <span>JavaScript</span>
 <span>jQuery</span>
 <span>Python</span>
 <span>Java</span>
 <span>AngularJS</span>
</div>
<div id="type">
 <strong>类型:</strong>
 <span class="active">全部</span>
 <span>基础</span>
 <span>案例</span>
 <span>框架</span>
 <span>工具</span>
</div>
<strong>返回值:</strong>
<p id="Res"></p>
<style>
 span{display: inline-block;
  cursor: pointer; padding: 8px; border: 1px solid #999;}
 span.active{
  background-color: #c14d00;
 }
</style>
<script>
 var dSpan = document.getElementById('direction').getElementsByTagName('span');
 var cSpan = document.getElementById('category').getElementsByTagName('span');
 var tSpan = document.getElementById('type').getElementsByTagName('span');
 var aSpan = document.getElementsByTagName('span');
 var oDirection = document.getElementById('direction');
 var oCategory = document.getElementById('category');
 var oType = document.getElementById('type');
 var oRes = document.getElementById('Res');
 dSpan[0].className = 'active';
 cSpan[0].className = 'active';
 tSpan[0].className = 'active';
 for(var i=0; i<aSpan.length; i++){
  aSpan[i].onclick = function(){
   var siblings = this.parentNode.children;
   for(var j=0; j<siblings.length; j++){
    siblings[j].className = '';
   }
   this.className = 'active';
   if(this.parentNode == oDirection || this.parentNode == oCategory || this.parentNode == oType){
    returnRes();
   }
  }
 }

 function returnRes(){
  var o1 = 0, o2 = 0, o3 = 0;
  for(var i=0; i<dSpan.length; i++){
   if(dSpan[i].className == 'active'){
    o1 = i;
   }
  }
  for(var i=0; i<cSpan.length; i++){
   if(cSpan[i].className == 'active'){
    o2 = i;
   }
  }
  for(var i=0; i<tSpan.length; i++){
   if(tSpan[i].className == 'active'){
    o3 = i;
   }
  }
  oRes.innerHTML = (dSpan[o1].innerHTML + "," + cSpan[o2].innerHTML + "," + tSpan[o3].innerHTML);
 }
</script>

最后附上效果图:

原生JS实现多条件筛选

注:本篇博文是 【无条件】的分类筛选

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 不能释放内存.
Sep 07 Javascript
BOM与DOM的区别分析
Oct 26 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
使用ajax+jqtransform实现动态加载select
Dec 01 Javascript
jQuery中closest()函数用法实例
Jan 07 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 Javascript
Angular5中调用第三方js插件的方法
Feb 26 Javascript
实例讲解vue源码架构
Jan 24 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 #Javascript
微信小程序通过websocket实时语音识别的实现代码
Aug 19 #Javascript
JS实现炫酷雪花飘落效果
Aug 19 #Javascript
javascript实现雪花飘落效果
Aug 19 #Javascript
js实现直播点击飘心效果
Aug 19 #Javascript
js实现鼠标点击飘爱心效果
Aug 19 #Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 #Javascript
You might like
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
javascript类继承机制的原理分析
2009/09/12 Javascript
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
js加密解密字符串可自定义密码因子
2014/05/13 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
python设置windows桌面壁纸的实现代码
2013/01/28 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
关于Python-faker的函数效果一览
2019/11/28 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
python_mask_array的用法
2020/02/18 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
数组越界问题
2015/10/21 面试题
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
环保倡议书500字
2014/05/15 职场文书
企业安全生产月活动总结
2014/07/05 职场文书
励志演讲稿500字
2014/08/21 职场文书
弄虚作假心得体会
2014/09/10 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
个人年终总结开头
2015/03/06 职场文书
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android