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 backgroundImage控制
May 19 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
js的2种继承方式详解
Mar 04 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 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
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
php判断对象是派生自哪个类的方法
2015/06/20 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
利用Python为iOS10生成图标和截屏
2016/09/24 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
python实现淘宝秒杀脚本
2020/06/23 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
Python如何获取文件指定行的内容
2020/05/27 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
实习生自我鉴定范文
2013/12/05 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
大学生村官个人总结
2015/02/15 职场文书
餐饮服务食品安全承诺书
2015/04/29 职场文书