原生js实现商品筛选功能
本文实例为大家分享了js商品筛选功能的具体代码,供大家参考,具体内容如下
创新互联网站建设由有经验的网站设计师、开发人员和项目经理组成的专业建站团队,负责网站视觉设计、用户体验优化、交互设计和前端开发等方面的工作,以确保网站外观精美、网站建设、成都网站设计易于使用并且具有良好的响应性。
用到的知识:js基础、dom、第一种方法用到的是js中的数组方法,第二种方法用到的是json和for-in以及es6
实现步骤
1、根据数据结构生成HTML结构(利用dom操作)
2、获取每一个li,给每一个li中每一个a标签绑定事件处理函数
3、点击a标签,把a标签的内容添加在对象中,同时添加样式
4、根据对象存的属性生成选择则条件的HTML结构(按顺序排列)
5、点击关闭选择的条件,删除数据,移除HTML结构,去除在其对应的li中的样式
第一种方法
第二种方法
// 筛选条件 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 += ''+chooseObj[i]+'x' // 生成结构的时候在行间保存对象的key值 html += `${chooseObj[i]}x` } } 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 = ''+JSON.stringify(filterArr,null,3)+''; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
新闻名称:原生js实现商品筛选功能
文章路径:http://azwzsj.com/article/isghsg.html