本文主要和大家分享原生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 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;
}
}
}
}
</script>
第二种方法
obj[key1] = "苹果"
*/
// 筛选条件
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 p")
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:;">x</a></mark>'
// 生成结构的时候在行间保存对象的key值
html += `<mark>${chooseobj[i]}<a data-index="${i}" href="javascript:;">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>
以上就是原生js代码实现商品筛选方法的详细内容。