原生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 相关文章推荐
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
Jan 09 Javascript
javascript控制台详解
Jun 25 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
JavaScript数组及常见操作方法小结
Nov 13 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 Javascript
vue中如何自定义右键菜单详解
Dec 08 Vue.js
微信小程序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程序员应该了解MongoDB的五件事
2013/06/03 PHP
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
跟老齐学Python之用Python计算
2014/09/12 Python
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
python内存动态分配过程详解
2019/07/15 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
有机童装:Toby Tiger
2018/05/23 全球购物
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
酒店前台接待岗位职责
2013/12/03 职场文书
体育教师自荐信范文
2013/12/16 职场文书
医药代表个人求职信范本
2013/12/19 职场文书
大学生村官演讲稿
2014/04/25 职场文书
离婚财产分配协议书
2014/10/21 职场文书
骨干教师个人总结
2015/02/11 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python
Go 语言结构实例分析
2021/07/04 Golang
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python
Python 图片添加美颜效果
2022/04/28 Python