原生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 相关文章推荐
用js模拟JQuery的show与hide动画函数代码
Sep 20 Javascript
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
通过JS运行机制的角度说说作用域
Mar 12 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
对vuex中getters计算过滤操作详解
Nov 06 Javascript
JS实现横向跑马灯效果代码
Apr 20 Javascript
类和原型的设计模式之复制与委托差异
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
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
php生成动态验证码gif图片
2015/10/19 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
JQuery切换显示的效果实例代码
2013/02/27 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
vue中echarts3.0自适应的方法
2018/02/26 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
python决策树之CART分类回归树详解
2017/12/20 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
世界上最好的帽子:Tilley
2016/11/27 全球购物
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
2014年五四青年节活动策划书
2014/04/22 职场文书
舞蹈专业求职信
2014/06/13 职场文书
庆元旦活动总结
2014/07/09 职场文书
2014年店长工作总结
2014/11/17 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers
不要在HTML中滥用div
2021/05/08 HTML / CSS
Django使用echarts进行可视化展示的实践
2021/06/10 Python