本文实例为大家分享了js实现商品筛选功能的具体代码，供大家参考，具体内容如下

应用场景：商品筛选

Document

* {

margin: 0;

padding: 0;

list-style: none;

text-decoration: none;

}

.choose {

width: 500px;

height: auto;

margin: auto;

}

.choose nav {

height: 50px;

background-color: red;

}

.choose nav span {

margin: 0 5px;

}

.choose .show {

color: red;

}

.choose ul li {

border: 1px solid black;

}

.choose ul li a {

box-sizing: border-box;

display: inline-block;

width: 40px;

border-left: 1px solid black;

margin: 5px;

padding-left: 5px;

}

var li = document.querySelectorAll('li');

var stack = []; //存放三个类别的option

for (var i = 0; i < li.length; i++) {

// 获取每个li中的option进行处理

var options = li[i].querySelectorAll("a");

for (var j = 0; j < options.length; j++) {

// 当选项被点击时，传入点击的类别是第几个li的

// options[j].onclick = Aclick.bind(options[j], [i]); //1. 将点击事件分离出去

options[j].onclick = Bclick(i); //2. 将点击事件分离出去

}

}

当写到这里的时候想要把这个事件函数分离出去，但是有参数。于是问题出现

如何将一个带参数的事件函数分离出去？？？

于是乎：就有了以下两种方法

1、使用bind改变this指向后返回一个不执行的函数

function Aclick(index) {

// 删掉nav

var choose = document.querySelector('.choose');

var nav = document.querySelector(".choose nav");

choose.removeChild(nav);

// 使用stack重新添加

stack[index] = this.innerHTML;

var nav = document.createElement("nav");

for (k = 0; k < stack.length; k++) {

if (stack[k] != "" && stack[k] != undefined) { //略过stack中的空项，重新向nav中添加span

var span = document.createElement("span");

var a = document.createElement("a");

a.innerHTML = "X";

a.href = "javascript:void(0);";

span.innerHTML = stack[k];

a.onclick = function() {

stack[index] = "";

nav.removeChild(this.parentNode);

}

span.appendChild(a);

nav.appendChild(span);

}

}

choose.insertBefore(nav, choose.children[0]);

}

2、在注册函数外面套一层函数将注册函数返回

function Bclick(index) {

return function() {

// 删掉nav

var choose = document.querySelector('.choose');

var nav = document.querySelector(".choose nav");

choose.removeChild(nav);

// 使用stack重新添加

stack[index] = this.innerHTML;

var nav = document.createElement("nav");

for (k = 0; k < stack.length; k++) {

if (stack[k] != "" && stack[k] != undefined) { //略过stack中的空项，重新向nav中添加span

var span = document.createElement("span");

var a = document.createElement("a");

a.innerHTML = "X";

a.href = "javascript:void(0);";

span.innerHTML = stack[k];

a.onclick = function() {

stack[index] = "";

nav.removeChild(this.parentNode);

}

span.appendChild(a);

nav.appendChild(span);

}

}

choose.insertBefore(nav, choose.children[0]);

}

}

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