js实现简单商品筛选功能

2024-10-02 00:15:34

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

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

JS实现商品筛选功能

每天一个JS 小demo之商品筛选.主要知识点:DOM方法综合运用效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> nav { height: 50px; } nav spa
原生js实现商品筛选功能

本文实例为大家分享了js商品筛选功能的具体代码,供大家参考,具体内容如下用到的知识:js基础.dom.第一种方法用到的是js中的数组方法,第二种方法用到的是json和for-in以及es6 实现步骤 1.根据数据结构生成HTML结构(利用dom操作) 2.获取每一个li,给每一个li中每一个a标签绑定事件处理函数 3.点击a标签,把a标签的内容添加在对象中,同时添加样式 4.根据对象存的属性生成选择则条件的HTML结构(按顺序排列) 5.点击关闭选择的条件,删除数据,移除HTML结构,去除在其
js实现简单商品筛选功能

本文实例为大家分享了js实现商品筛选功能的具体代码,供大家参考,具体内容如下应用场景:商品筛选 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding:
使用Angular.js实现简单的购物车功能

先给大家分享实现代码,在代码下面有效果图展示,大家可以两者结合参考下,废话不多说了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://code.angularjs.org/1.2.5/angular.min.js"></script
js实现简单锁屏功能实例

本文实例讲述了js实现简单锁屏功能的方法.分享给大家供大家参考.具体实现方法如下: //********* 锁屏DIV *************************** function LockScreen(tag,title,width,height,url) { if (tag) //锁屏 { var lockdiv = document.getElementById("lockscreen"); if (lockdiv!=null) { lockdiv.style.dis
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】

本文实例总结了JS常见简单正则表达式验证功能.分享给大家供大家参考,具体如下: 下面都是一些比较常用简单的验证,像那些特殊的复杂的情况这里不进行考虑 1.验证电话号码或者手机号码 /** * 验证电话号码(手机号码+电话号码) * @param obj * @returns {Boolean} */ function checkPhoneNum(obj){ if(/^((\d{3}-\d{8}|\d{4}-\d{7,8})|(1[3|5|7|8][0-9]{9}))$/.test(obj)){
原生JS实现简单的倒计时功能示例

本文实例讲述了原生JS实现简单的倒计时功能.分享给大家供大家参考,具体如下: 1.第一种 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS倒计时</title> </head> <body> <div id="div"></div> <scr
js实现简单抽奖小功能

本文实例为大家分享了js实现简单抽奖小功能的具体代码,供大家参考,具体内容如下 1.场景: 点击按钮开始随机抽取奖品,当停止那刻停留在大屏幕的是抽中的奖品("谢谢"即为没奖). 2.思路: 众所周知,抽奖主要讲究的就是随机性,并且是在一堆奖项中抽取.那么可以锁定方向:用数组放奖项名,用Math.random()来返回介于 0(包含) ~ 1(不包含) 之间的一个随机数.只要能随机选中数组的下标,便能随机选中奖项. 话不多说,附上代码: <!DOCTYPE html> <
原生js实现简单滑动解锁功能 js实现滑动拼图解锁

本文实例为大家分享了js实现简单滑动解锁功能以及滑动拼图解锁的具体代码,供大家参考,具体内容如下简单实现滑动解锁,效果图是这样的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi
node.js实现简单登录注册功能

本文实例为大家分享了node.js实现简单登录注册的具体代码,供大家参考,具体内容如下 1.首先需要一个sever模块用于引入路由,引入连接数据库的模块,监听服务器2.要有model层,里面写数据库连接模块和数据库的各种model(表),并导出model对象3.工具类utils,里面存放一些功能的模块,并且封装后导出 ,例如发送验证码的功能4.写路由,需要对数据库操作就使用导出的model对象,需要功能模块就使用导出的功能对象随后返回这个路由,在sever里引入5.生成api文档 sever模块

js实现简单商品筛选功能

相关推荐

随机推荐