原生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 相关文章推荐
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 Javascript
浅谈JavaScript的push(),pop(),concat()方法
Jun 03 Javascript
基于JS代码实现实时显示系统时间
Jun 16 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
js实现省市级联效果分享
Aug 10 Javascript
React-Native中props具体使用详解
Sep 04 Javascript
javaScript实现滚动条事件详解
Mar 24 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 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
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
深入解析php之apc
2013/05/15 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
php单例模式示例分享
2015/02/12 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
javascript globalStorage类代码
2009/06/04 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
python求众数问题实例
2014/09/26 Python
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
python实现3D地图可视化
2020/03/25 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
日本小田急百货官网:Odakyu
2018/07/19 全球购物
新西兰优惠网站:Treat Me
2019/07/04 全球购物
什么是会话Bean
2015/05/14 面试题
团支部建设方案
2014/05/02 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
老乡聚会通知
2015/04/23 职场文书