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

应用场景:商品筛选


		
		
		
		
			Document
		



		



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

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

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

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]); } }

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

js实现简单商品筛选功能的更多相关文章

  1. 细说 js 的7种继承方式

    在这之前,先搞清楚下面这个问题:function Father(){} Father.prototype.na......

  2. JavaScript如何操作css

    原本应该是由css进行控制html中的div的宽高和背景颜色,但是在下方使用了JavaScript进行重新调用了di......

  3. js简单粗暴的发布订阅示例代码

    什么是发布/订阅?我打个比方,你去某个门店买衣服,你和门店店长相互并不认识,门店店长只管卖他的衣服,并不关心是谁来买......

  4. 在JavaScript中查找字符串中最长单词的三种方法(推荐)

    本文基于Free Code Camp基本算法脚本“查找字符串中最长的单词”。在此算法中,我们要查看每个单词并计算每个......

  5. JavaScript 中的六种循环方法

    Javascript中的遍历循环1.for循环对于数值索引的数组来说,可以使用标准的for循环来遍历值const a......

  6. 浅谈JavaScript代码性能优化2

    一.减少判断层级 从下图代码中可以明显看出,同样的效果判断层级的减少可以优化性能二.减少作用域链查找层级 简单解释下......

  7. jQuery中toggle与slideToggle以及fadeToggle的显示、隐藏方法的比较

    1、区别 ①动画效果的比较: toggle:直接显示、隐藏,如果有【时间参数】且【匹配的元素有宽度属性】,则动态效果......

  8. 原生JavaScript实现轮播图

    本文实例为大家分享了JavaScript实现轮播图的具体代码,供大家参考,具体内容如下效果:代码:* {margin......

  9. javascript脚本何时会被执行

    javascript脚本可以嵌入在html内的任意地方,但它何时被调用呢?当浏览器打开HTML文件后,会直接运行不是......

  10. jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】

    本文实例讲述了jQuery+css实现的点击图片放大缩小预览功能。分享给大家供大家参考,具体如下:要求点击一张图片,......

随机推荐

  1. Java并发/多线程-CAS原理分析

    目录什么是CAS并发安全问题举一个典型的例子i++如何解决?底层原理CAS需要注意的问题使用限制ABA 问题概念解决......

  2. Python获取Linux系统内存情况

    [Python]代码import subprocessimport rekeydic = {"MemTot......

  3. sqlserver 日期与字符串之间的转换

    字符转换为日期时,Style的使用--1. Style=101时,表示日期字符串为:mm/dd/yyyy格式SELE......

  4. 用python批量移动文件

    我是用来移动图片的,其他格式的文档也是可以的,改下后缀列表就可以了import os,shutilimport da......

  5. php swoft框架实例用法

    在框架选择上,不少人会觉得swoft才是最强PHP框架,尤其是在常驻内存模式的应用级高性能框架,性能是这一堆页面级框......

  6. python生成二维码

    python生成二维码需要用到的包pip install qrcode 代码:import qrcode from ......

  7. python 窃取摄像头照片的实现示例

    python窃取摄像头照片源码+获取授权码方法+py打包成exe教你用python做一个属于自己的窃取摄像头照片的软......

  8. PHP中PDO关闭连接的方法问题

    在之前我们手写 mysql 的连接操作时,一般都会使用 mysql_close() 来进行关闭数据库连接的操作。不过......

  9. 原生PHP网页导出和导入excel文件实例

    原生PHP实现的网页导出和导入excel文件实例,包括上传也是用的原生。还可在exportExcel方法里设置字体等......

  10. 基础篇-http协议《http 简介、url详解、request》

    目录一、http 简介二、url 详解三、request1.get 和 post2.请求方法3.request 组成......