本文主要和大家分享原生js代码实现商品筛选方法，用到的知识：js基础、dom、第一种方法用到的是js中的数组方法，第二种方法用到的是json和for-in以及es6。
实现步骤
1、根据数据结构生成HTML结构（利用dom操作）
2、获取每一个li,给每一个li中每一个a标签绑定事件处理函数
3、点击a标签，把a标签的内容添加在对象中，同时添加样式
4、根据对象存的属性生成选择则条件的HTML结构（按顺序排列）
5、点击关闭选择的条件，删除数据，移除HTML结构，去除在其对应的li中的样式
第一种方法
window.onload = function(){var oType = document.getElementById('type');var oChoose = document.getElementById('choose');var oChosp = oChoose.getElementsByTagName('p')[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;oChosp.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);oChosp.appendChild(oChomark);}}var num = 0;var ChoseA = oChosp.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;}}}}
登录后复制
第二种方法
obj[key1] = "苹果"*/// 筛选条件var filterChoose = ["name","size","system","www"];var filterObj = {}for( var k = 0; k'+chooseObj[i]+'x'// 生成结构的时候在行间保存对象的key值html += `${chooseObj[i]}x`}}chooseElement.innerHTML = html;// 获取到所有的元素var chooseA = chooseElement.querySelectorAll("a");for(var j = 0; j
登录后复制
以上就是原生js代码实现商品筛选方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2783743.html
