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 = []; //存放三个类别的optionfor (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>

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

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

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

使用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中添加spanvar 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]);}

在注册函数外面套一层函数将注册函数返回

        function Bclick(index) {return function() {// 删掉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中添加spanvar 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实现商品筛选功能相关推荐

商品筛选html,js实现简单商品筛选功能
本文实例为大家分享了js实现商品筛选功能的具体代码,供大家参考,具体内容如下应用场景:商品筛选 Document * { margin: 0; padding: 0; list-style: non ...
【PHP开源产品】Ecshop的商品筛选功能实现分析之一
一.首先,说明一下为什么要对category.php文件进行分析. 原因如下: ①个人对商城类商品筛选功能的实现比较好奇: ②对商城中关于商品的数据表设计比较感兴趣.(该功能涉及到与数据库的交互,而且 ...
Ecshop的商品筛选功能实现分析之一（主要对category.php进行分析）
一.首先,说明一下为什么要对category.php文件进行分析. (1)原因如下: ①个人对商城类商品筛选功能的实现比较好奇: ②对商城中关于商品的数据表设计比较感兴趣.(该功能涉及到与数据库的交互 ...
【PHP开源产品】Ecshop的商品筛选功能实现分析之一（主要对category.php进行分析）
[PHP开源产品]Ecshop的商品筛选功能实现分析之一(主要对category.php进行分析) 一.首先,说明一下为什么要对category.php文件进行分析. (1)原因如下: ①个人对商城类 ...
TP5简单实现类似京东淘宝多级商品筛选功能。
前几天做项目时,碰到个需求,商品多级分类筛选功能.之前从没做过,查了不少资料,总算实现了.虽然实现的不够优雅,但起码能有效果,心里还是很高兴的.菜鸟有一颗成为大神的心.在这里分享给各位童鞋,欢迎大佬指 ...
仿手机端京东商城html源码_web前端入门到实战：制作仿京东商城-商品列表商品筛选功能...
这次实现一个仿京东商城-商品列表商品筛选的功能一.html代码已选条件: 品牌: 全部惠普(hp) 联想(Lenovo) 联想(ThinkPad) 宏基(acer) 华硕戴尔三星索尼东芝 ...
html表格筛选,js实现表格筛选功能
本应用就两个主要实现: 1.表格的id 和 class之间的命名关系请看图: 将组名和个人信息联表格联系起来,这样会很好的操作表格 HTML代码: 前台设计组张三男浙江宁波李四男浙江宁波胡歌男浙江宁 ...
html怎么做商品列表,纯js实现商品列表功能
商品列表功能需求:根据数据创建商品列表来看一下效果: html结构:模拟商品数据,根据数据实例化Main对象. goodsList import Main from './js/Main.js'; ...
基于JavaScript实现前端数据多条件筛选功能
效果图: 实现方法:默认全部.点击每一项进行不同条件切换,根据后台数据传递参数,实现动态的商品筛选功能. 参考如下: 代码如下:源代码下载: https://github.com/gaomengpi ...

js实现商品筛选功能

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

js实现商品筛选功能相关推荐

最新文章

热门文章