建站
咨询
售后
建站咨询
原生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://scgulin.cn/article/isghsg.html
