原生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 相关文章推荐
win7下安装配置node.js+express开发环境
Dec 06 Javascript
jQuery获取剪贴板内容的方法
Jun 16 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
微信小程序中使用echarts的实现方法
Apr 24 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 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函数解决SQL injection
2006/12/09 PHP
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
php汉字转拼音的示例
2014/02/27 PHP
php读取excel文件示例分享(更新修改excel)
2014/02/27 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
2019/04/23 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
Python实现一个简单的验证码程序
2017/11/03 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
一百多行python代码实现抢票助手
2018/09/25 Python
Python函数装饰器实现方法详解
2018/12/22 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
详解Python IO编程
2020/07/24 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
spring boot中nativeQuery的用法
2021/07/26 Java/Android
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers
5个实用的JavaScript新特性
2022/06/16 Javascript