jQuery如何完成商品筛选功能？教你两种思路
发布时间：2022-02-08 15:11:58 所属栏目：语言 来源：互联网
导读：这篇文章我们来了解jQuery如何实现商品筛选功能，如果经常购物的朋友对于商品的筛选功能应该都不陌生吧，能帮助我们快速的找到所需的商品，那么这个功能究竟是如何实现的呢？下文给大家分享了两种实现思路和方法，感兴趣的朋友就继续往下看吧。 本文操作环境
|
这篇文章我们来了解jQuery如何实现商品筛选功能，如果经常购物的朋友对于商品的筛选功能应该都不陌生吧，能帮助我们快速的找到所需的商品，那么这个功能究竟是如何实现的呢？下文给大家分享了两种实现思路和方法，感兴趣的朋友就继续往下看吧。 本文操作环境：Windows7系统、jquery3.2.1、Dell G3电脑。 jquery怎么实现筛选功能？ jquery 实现筛选功能。 商品属性筛选 商品的属性筛选 是一个十分常见的功能，通常是同一类型的属性只能选择一个。例如 价格范围，或者品牌，为了使选择的内容看上去更直观 ，一般都会将选择项列出，并拥有点击取消 选择 ，点击同类替换的功能。 在下面给出两个完整实现。 实现1： 使用jquery 的appendTo 让点击的元素加入到列出项里面 （同时检测列出项是否有同一类的元素，有则替换出来，使它返回原列表），在列出项里面点击元素 ，则返回 原div ,这里为了实现 返回原来的div 使用了自定义属性 。 自然这个实现是有一定的问题，由于限制了div 的class 和父元素的id 一致，这种情况很不方便 ，而且每一次都会需要重新绑定所有事件，一个递归。效率上有所欠缺， 接下来看第二种思路 ，更简单清晰一点。效率会更高一点，而且不需要id 和class 相同 ，也无需重新绑定多个事件 <!DOCTYPE html> <html> <head> <title>动画</title> <style type="text/css"> .class1,.class2{ width: 100px; height: 40px; margin: 10px; } #count{ background-color: sandybrown; width: 400px; height: 200px; } </style> </head> <body> <div id='class1'> <button class="class1" data-belong="class1">皮鞋</button> <button class="class1" data-belong="class1">凉鞋</button> <button class="class1" data-belong="class1">拖鞋</button> </div> <div id="class2"> <button class="class2" data-belong="class2">手套</button> <button class="class2" data-belong="class2">皮手套</button> <button class="class2" data-belong="class2">毛手套</button> </div> <div id="count"></div> </body> </html> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> (function check(){ $('#class1> button,#class2>button').off("click").on("click",function(){ $("#count button."+$(this).attr("data-belong")).appendTo("#"+$(this).attr("data-belong")); $(this).appendTo("#count"); check() }) $('#count button').off("click").on("click",function(){ $(this).appendTo("#"+$(this).attr("data-belong")) check() }) })() </script> 实现2： 使用jquery的clone 函数 ，这样原列表就不会需要改动 ，点击 属性列表里面的内容只需要直接移除，不需要id 和 class一致。 更自由一些 。代码减少了，没有递归的，没有数据修改绑定的问题，比实现1 优化很多 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> .class1,.class2{ width: 100px; height: 40px; margin: 10px; } #count{ background-color: sandybrown; width: 400px; height: 200px; } </style> <body> <div> <button class="class1" data-belong="class1">皮鞋</button> <button class="class1" data-belong="class1">凉鞋</button> <button class="class1" data-belong="class1">拖鞋</button> </div> <div> <button class="class2" data-belong="class2">手套</button> <button class="class2" data-belong="class2">皮手套</button> <button class="class2" data-belong="class2">毛手套</button> </div> <div class="count"> </div> </body> </html> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> //只需保持 button 的 class 标志 和data-belong 一致即可。 $("div:lt(2) button").click(function(){ $("div.count ."+$(this).attr('data-belong')).remove(); $(this).clone().appendTo("div.count"); $('.count button').off("click").on("click",function(){ $(this).remove(); }) }) </script> （编辑：桂林站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
