java 商品筛选视频教程_原生js实现商品筛选功能

本文实例为大家分享了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 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

var aLi = document.createElement('li');

var aSpan = document.createElement('span');

aSpan.innerHTML = crumbData[i].title;

aLi.appendChild(aSpan);

for(var j = 0; 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

arr.push(0);

}//先将数组中存放aLi.length个0，方便接下来按li的顺序存放数据

for(var i=0; i

aLi[i].prevNode = null;//记录点击的a标签

aLi[i].index = i;//记录每一个li的下标

var aA = aLi[i].getElementsByTagName('a');

for(var j=0; 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

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[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;

}

}

}

}

第二种方法

// 筛选条件

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)+'

';

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。