原生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 相关文章推荐
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
js触发select onchange事件的小技巧
Aug 05 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
Javascript实现图片不间断滚动的代码
Jun 22 Javascript
简单的js表格操作
Sep 24 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
Aug 16 Javascript
js实现登录与注册界面
Nov 01 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
React+EggJs实现断点续传的示例代码
Jul 07 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笔记之:日期函数的使用介绍
2013/04/24 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
简单通过settimeout看javascript的运行机制
2019/05/10 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
关于Python-faker的函数效果一览
2019/11/28 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
Windows和Linux动态库应用异同
2016/07/28 面试题
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
客户代表自我评价范例
2013/09/24 职场文书
资产经营总监岗位职责
2013/12/04 职场文书
电子商务专员岗位职责
2013/12/11 职场文书
办公室文员工作职责
2014/01/31 职场文书
2014年五一活动策划方案
2014/03/15 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
论群众路线学习笔记
2014/11/06 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
数学备课组工作总结
2015/08/12 职场文书
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技