js实现简单商品筛选功能


Posted in Javascript onFebruary 02, 2021

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Js callBack 返回前一页的js方法
Nov 30 Javascript
探讨jQuery的ajax使用场景(c#)
Dec 03 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
JS逻辑运算符短路操作实例分析
Jul 09 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
js实现窗口全屏示例详解
Sep 17 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 Javascript
vue全屏事件开发详解
Jun 17 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 #Javascript
ES6的循环与可迭代对象示例详解
Jan 31 #Javascript
Javascript生成器(Generator)的介绍与使用
Jan 31 #Javascript
Node.js中的异步生成器与异步迭代详解
Jan 31 #Javascript
Vite和Vue CLI的优劣
Jan 30 #Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 #Vue.js
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 29 #Javascript
You might like
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
两种设置php载入页面时编码的方法
2014/07/29 PHP
php中删除数组的第一个元素和最后一个元素的函数
2015/03/07 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
php实现登录页面的简单实例
2019/09/29 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
python实现的简单RPG游戏流程实例
2015/06/28 Python
python得到电脑的开机时间方法
2018/10/15 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
中央空调节能方案
2014/06/15 职场文书
自查自纠工作总结
2014/10/15 职场文书
2014年药品销售工作总结
2014/12/16 职场文书
长征观后感
2015/06/09 职场文书
python 模块重载的五种方法
2021/04/24 Python
python 实现两个变量值进行交换的n种操作
2021/06/02 Python
Redis分布式锁Redlock的实现
2021/08/07 Redis
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers