原生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 相关文章推荐
Cookie 注入是怎样产生的
Apr 08 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 Javascript
iphone safari不支持position fixed的解决方法
May 04 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
Dec 29 Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
vue+webpack中配置ESLint
Nov 07 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
js实现简单抽奖功能
Nov 24 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 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
PHP return语句的另一个作用
2014/07/30 PHP
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
Python科学画图代码分享
2017/11/29 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
python队列Queue的详解
2019/05/10 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
什么是serialVersionUID
2016/03/04 面试题
C#中的验证控件有几种
2014/03/08 面试题
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
医生实习工作总结的自我评价
2013/09/27 职场文书
临床医学专业学生的自我评价分享
2013/11/21 职场文书
外贸业务员求职信范文
2013/12/12 职场文书
信息专业个人的自我评价
2013/12/27 职场文书
电工技术比武方案
2014/05/11 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
长征观后感
2015/06/09 职场文书
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技