js实现简单商品筛选功能

本文实例为大家分享了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) {
    // 删掉navvar 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]);
 }
}
    

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

• 原生js实现商品筛选功能
• JS实现商品筛选功能

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！