原生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 prototype原型操作笔记
Dec 07 Javascript
Extjs实现进度条的两种便捷方式
Sep 26 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
Mar 23 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
使用原生js封装的ajax实例(兼容jsonp)
Oct 12 Javascript
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 Javascript
Electron 如何调用本地模块的方法
Feb 01 Javascript
React实现评论的添加和删除
Oct 20 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
德劲1104的电路分析与改良
2021/03/01 无线电
用mysql内存表来代替php session的类
2009/02/01 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
解放web程序员的输入验证
2006/10/06 Javascript
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
Python 解决相对路径问题:&quot;No such file or directory&quot;
2020/06/05 Python
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
大学生职业生涯规划书参考模板
2014/03/05 职场文书
创新型城市实施方案
2014/03/06 职场文书
建筑管理专业求职信
2014/07/28 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
初三英语教学反思
2016/02/15 职场文书
Pytorch使用shuffle打乱数据的操作
2021/05/20 Python
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS