本文实例为大家分享了js实现商品筛选功能的具体代码，供大家参考，具体内容如下
应用场景：商品筛选
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< title >Document</ title >
< style type = "text/css" >
* {
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;
}
</ style >
</ head >
< body >
< div class = "choose" >
< nav ></ nav >
< ul >
< li >
< strong >手机:</ strong >
< a href = "javascript:;" >小米</ a >
< a href = "javascript:;" >华为</ a >
< a href = "javascript:;" >apple</ a >
< a href = "javascript:;" >OPPO</ a >
< a href = "javascript:;" >vivo</ a >
</ li >
< li >
< strong >价格:</ strong >
< a href = "javascript:;" >3200</ a >
< a href = "javascript:;" >2600</ a >
< a href = "javascript:;" >899</ a >
< a href = "javascript:;" >2799</ a >
< a href = "javascript:;" >2299</ a >
</ li >
< li >
< strong >屏幕:</ strong >
< a href = "javascript:;" >399</ a >
< a href = "javascript:;" >600</ a >
< a href = "javascript:;" >800</ a >
< a href = "javascript:;" >1200</ a >
</ li >
</ ul >
</ div >
</ body >
</ html >
<script type= "text/javascript" >
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. 将点击事件分离出去
}
}
</script>
当写到这里的时候想要把这个事件函数分离出去，但是有参数。于是问题出现
如何将一个带参数的事件函数分离出去？？？
于是乎：就有了以下两种方法
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]);
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/weixin_45773503/article/details/113444599