原生js实现商品筛选功能


Posted in Javascript onOctober 28, 2019

本文实例为大家分享了js商品筛选功能的具体代码,供大家参考,具体内容如下

用到的知识:js基础、dom、第一种方法用到的是js中的数组方法,第二种方法用到的是json和for-in以及es6

实现步骤

1、根据数据结构生成HTML结构(利用dom操作)

2、获取每一个li,给每一个li中每一个a标签绑定事件处理函数

3、点击a标签,把a标签的内容添加在对象中,同时添加样式

4、根据对象存的属性生成选择则条件的HTML结构(按顺序排列)

5、点击关闭选择的条件,删除数据,移除HTML结构,去除在其对应的li中的样式

第一种方法

<script>
 window.onload = function(){
 var oType = document.getElementById('type');
 var oChoose = document.getElementById('choose');
 var oChosDiv = oChoose.getElementsByTagName('div')[0];
 var crumbData = [
  {
  "title": "品牌",
  "data": [ "苹果","小米","锤子","魅族","华为","三星","OPPO","vivo","乐视"]
  },
  {
  "title": "尺寸",
  "data": ["4.0-4.5英寸","4.6-4.9英寸","5.0-5.5英寸","6.0英寸以上"]
  },
  {
  "title": "系统",
  "data": ["android","ios","window phone","无","其他"]
  },
  {
  "title": "网络",
  "data": ["联通3G","双卡单4G","双卡双4G","联通4G"]
  }
 ]
 //利用dom动态添加元素
 for(var i=0; i<crumbData.length; i++){
  var aLi = document.createElement('li');
  var aSpan = document.createElement('span');
  
  aSpan.innerHTML = crumbData[i].title;
  aLi.appendChild(aSpan);
  for(var j = 0; j<crumbData[i].data.length; j++){
  var aA = document.createElement('a');
  aA.innerHTML = crumbData[i].data[j];
  aLi.appendChild(aA); 
  }
  oType.appendChild(aLi);
  }
  
 var aLi = oType.getElementsByTagName('li');
 var arr = [];//用来存放筛选条件
 for(var i = 0; i<aLi.length; i++){
  arr.push(0);
  }//先将数组中存放aLi.length个0,方便接下来按li的顺序存放数据
 for(var i=0; i<aLi.length; i++){
  
  aLi[i].prevNode = null;//记录点击的a标签
  aLi[i].index = i;//记录每一个li的下标
  var aA = aLi[i].getElementsByTagName('a');
  
  for(var j=0; j<aA.length; j++){  
  aA[j].onclick = function(){
   
   var parent = this.parentNode;//点击的a标签的父级li
   //既要生成选择的结构,还要对选择的结构进行排序
   //点击同一行筛选条件,只能有一个
   if(parent.prevNode){
   parent.prevNode.style.color = ''; 
   }
   this.style.color = 'red';
   arr[parent.index] = this.innerText;
  oChosDiv.innerHTML = ''; 
  for(var i=0; i<arr.length; i++){
   if(arr[i]){ //只有当arr[i]的值不为0时,也即与下标对应的第i个li中有被选中的时候才执行下面的代码  
  var oChomark = document.createElement('mark');
   
  oChomark.innerHTML = arr[i];
  var oCxa = document.createElement('a'); 
  oCxa.innerHTML = 'X';
  oCxa.setAttribute('name',i);//标记商品筛选区的a所在的li是第几个
  oChomark.appendChild(oCxa); 
  oChosDiv.appendChild(oChomark);}
  }
  var num = 0;
  var ChoseA = oChosDiv.getElementsByTagName('a');
  for(var i = 0; i<ChoseA.length; i++){
   ChoseA[i].index = i;
   ChoseA[i].onclick = function(){
   num = parseInt(this.getAttribute('name'));//得到删除a标签在第几个li中(记得将字符串格式转化为数字格式)
   this.parentNode.remove();
   aLi[num].prevNode.style.color = '';
   arr[num]=0;//让删除的元素在数组中对应下标的值变为0
   }
   }
  
   parent.prevNode = this;
   
   }
  }
  }
 }

</script>

第二种方法

// 筛选条件
 var filterChoose = ["name","size","system","www"];
 var filterObj = {}
 
 for( var k = 0; k< lis.length; k++ ){
 //得到每一个li中的所有的a标签
 itemA = lis[k].querySelectorAll("a");
 lis[k].prevNode = null; // 记录点击的a标签
 lis[k].index = k; // 记录每一个li的下标
 for( var m = 0; m < itemA.length; m++ ){
  // 给每一个a标签绑定点击处理函数
  itemA[m].onclick = function(){
  var parent = this.parentNode; // 点击的a标签的父级 li
  // 既要生成选择的结构,还要对选择的结构进行排序
  // 点击同一行筛选条件,只能有一个
  /*
   {
   key: 
   key2: 
   }
   key值是唯一的
   key值改怎定义???
  */
  // 把每一个li的下标作为key值,把点击的a的内容作为值
  chooseObj[parent.index] = this.innerText;
  console.log(chooseObj)
  // 生成筛选条件的结构
  createChooseHtml();
  // 存一下筛选的值
  filterObj[filterChoose[parent.index]] = this.innerText.trim();
  // 筛选出想要的数据
  filterHandle()
  // 去掉之前点击的a标签的color
  if(parent.prevNode){
   parent.prevNode.style.color = ''
  }
  this.style.color = 'red';
  parent.prevNode = this; // 点击之后记录点击的这个元素
  }
 }
 }
 // 选择的容器
 var chooseElement = document.querySelector("#choose div")
 function createChooseHtml(){
 // 对象是没有顺序
 /*
  chooseObj = {
  1: "4.0",
  0:"苹果",
  3:
  2:
  }
 */
 var html = '';
 for( var i = 0; i < lis.length; i++ ){
  // i: 0 1 2 3
  if( chooseObj[i] ){
  // html += '<mark>'+chooseObj[i]+'<a href="javascript:;" rel="external nofollow" rel="external nofollow" >x</a></mark>'
  // 生成结构的时候在行间保存对象的key值
  html += `<mark>${chooseObj[i]}<a data-index="${i}" href="javascript:;" rel="external nofollow" rel="external nofollow" >x</a></mark>`
  }
 }
 
 chooseElement.innerHTML = html;
 
 
 // 获取到所有的元素
 var chooseA = chooseElement.querySelectorAll("a");
 
 for(var j = 0; j < chooseA.length; j++){
  chooseA[j].onclick = function (){
  // 移出当前点击a标签的父级
  // this.parentNode.parentNode.removeChild(this.parentNode);
  this.parentNode.remove();
  // 删数据
  delete chooseObj[this.dataset.index];
  // 点击每一个li中的a标签存的属性
  lis[this.dataset.index].prevNode.style.color = '';
  console.log(chooseObj)
  };
 }
 
 }
 var shopList = document.querySelector(".shop-list")
 //筛选数据
 function filterHandle(){
 var filterArr = shopsList; // 等于原始数组
 for(var attr in filterObj){
  // 做一个过滤
  filterArr = filterArr.filter(function(obj){
  console.log(attr)
  return obj[attr] === filterObj[attr]
  })
 }
 shopList.innerHTML = '<pre>'+JSON.stringify(filterArr,null,3)+'</pre>';
 }
 
 
 </script>

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

Javascript 相关文章推荐
用JavaScript编写COM组件的步骤
Mar 17 Javascript
jqPlot 基于jquery的画图插件
Apr 26 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
浅谈javascript属性onresize
Apr 20 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
Popup弹出框添加数据实现方法
Oct 27 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
如何在Vue.JS中使用图标组件
Aug 04 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 #Javascript
JavaScript制作3D旋转相册
Aug 02 #Javascript
微信小程序工具函数封装
Oct 28 #Javascript
js实现3D照片墙效果
Oct 28 #Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 #Javascript
使用Vue调取接口,并渲染数据的示例代码
Oct 28 #Javascript
JavaScript 反射和属性赋值实例解析
Oct 28 #Javascript
You might like
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
PHP微信支付实例解析
2016/07/22 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
JavaScript中的null和undefined区别介绍
2015/01/01 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
react中使用swiper的具体方法
2018/05/15 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
Python 的 with 语句详解
2014/06/13 Python
详解python3实现的web端json通信协议
2016/12/29 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
记者岗位职责
2014/01/06 职场文书
留学推荐信中文范文三篇
2014/01/25 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
小学生竞选班长演讲稿
2014/04/24 职场文书
党员活动日总结
2014/05/05 职场文书
网站出售协议书范文
2014/10/10 职场文书
营业员岗位职责范本
2015/04/14 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书