原生js实现商品筛选功能
本文实例为大家分享了js商品筛选功能的具体代码，供大家参考，具体内容如下
用到的知识：js基础、dom、第一种方法用到的是js中的数组方法，第二种方法用到的是json和for-in以及es6
实现步骤
1、根据数据结构生成HTML结构（利用dom操作）
2、获取每一个li,给每一个li中每一个a标签绑定事件处理函数
3、点击a标签，把a标签的内容添加在对象中，同时添加样式
4、根据对象存的属性生成选择则条件的HTML结构（按顺序排列）
5、点击关闭选择的条件，删除数据，移除HTML结构，去除在其对应的li中的样式
第一种方法
第二种方法
//筛选条件
varfilterChoose=["name","size","system","www"];
varfilterObj={}
for(vark=0;kx'
//生成结构的时候在行间保存对象的key值
html+=`${chooseObj[i]}x `
}
}
chooseElement.innerHTML=html;
//获取到所有的元素
varchooseA=chooseElement.querySelectorAll("a");
for(varj=0;j';
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。