• 售前

  • 售后

热门帖子
入门百科

js实现简单商品筛选功能

[复制链接]
标题超过5个字 显示全部楼层 发表于 2021-10-25 19:56:55 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了js实现商品筛选功能的具体代码,供各人参考,具体内容如下
应用场景:商品筛选
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <style type="text/css">
  7. * {
  8. margin: 0;
  9. padding: 0;
  10. list-style: none;
  11. text-decoration: none;
  12. }
  13. .choose {
  14. width: 500px;
  15. height: auto;
  16. margin: auto;
  17. }
  18. .choose nav {
  19. height: 50px;
  20. background-color: red;
  21. }
  22. .choose nav span {
  23. margin: 0 5px;
  24. }
  25. .choose .show {
  26. color: red;
  27. }
  28. .choose ul li {
  29. border: 1px solid black;
  30. }
  31. .choose ul li a {
  32. box-sizing: border-box;
  33. display: inline-block;
  34. width: 40px;
  35. border-left: 1px solid black;
  36. margin: 5px;
  37. padding-left: 5px;
  38. }
  39. </style>
  40. </head>
  41. <body>
  42. <div class="choose">
  43. <nav></nav>
  44. <ul>
  45. <li>
  46. <strong>手机:</strong>
  47. <a href="javascript:;">小米</a>
  48. <a href="javascript:;">华为</a>
  49. <a href="javascript:;">apple</a>
  50. <a href="javascript:;">OPPO</a>
  51. <a href="javascript:;">vivo</a>
  52. </li>
  53. <li>
  54. <strong>价格:</strong>
  55. <a href="javascript:;">3200</a>
  56. <a href="javascript:;">2600</a>
  57. <a href="javascript:;">899</a>
  58. <a href="javascript:;">2799</a>
  59. <a href="javascript:;">2299</a>
  60. </li>
  61. <li>
  62. <strong>屏幕:</strong>
  63. <a href="javascript:;">399</a>
  64. <a href="javascript:;">600</a>
  65. <a href="javascript:;">800</a>
  66. <a href="javascript:;">1200</a>
  67. </li>
  68. </ul>
  69. </div>
  70. </body>
  71. </html>
复制代码
  1. <script type="text/javascript">
  2. var li = document.querySelectorAll('li');
  3. var stack = []; //存放三个类别的option
  4. for (var i = 0; i < li.length; i++) {
  5. // 获取每个li中的option进行处理
  6. var options = li[i].querySelectorAll("a");
  7. for (var j = 0; j < options.length; j++) {
  8. // 当选项被点击时,传入点击的类别是第几个li的
  9. // options[j].onclick = Aclick.bind(options[j], [i]); //1. 将点击事件分离出去
  10. options[j].onclick = Bclick(i); //2. 将点击事件分离出去
  11. }
  12. }
  13. </script>
复制代码
当写到这里的时候想要把这个变乱函数分离出去,但是有参数。于是问题出现
如何将一个带参数的变乱函数分离出去???

于是乎:就有了以下两种方法
1、使用bind改变this指向后返回一个不执行的函数
  1. function Aclick(index) {
  2. // 删掉nav
  3. var choose = document.querySelector('.choose');
  4. var nav = document.querySelector(".choose nav");
  5. choose.removeChild(nav);
  6. // 使用stack重新添加
  7. stack[index] = this.innerHTML;
  8. var nav = document.createElement("nav");
  9. for (k = 0; k < stack.length; k++) {
  10. if (stack[k] != "" && stack[k] != undefined) { //略过stack中的空项,重新向nav中添加span
  11.   var span = document.createElement("span");
  12.   var a = document.createElement("a");
  13.   a.innerHTML = "X";
  14.   a.href = "javascript:void(0);";
  15.   span.innerHTML = stack[k];
  16.   a.onclick = function() {
  17.   stack[index] = "";
  18.   nav.removeChild(this.parentNode);
  19.   }
  20.   span.appendChild(a);
  21.   nav.appendChild(span);
  22. }
  23. }
  24. choose.insertBefore(nav, choose.children[0]);
  25. }
复制代码
2、在注册函数外面套一层函数将注册函数返回
  1. function Bclick(index) {
  2. return function() {
  3. // 删掉nav
  4. var choose = document.querySelector('.choose');
  5. var nav = document.querySelector(".choose nav");
  6. choose.removeChild(nav);
  7. // 使用stack重新添加
  8. stack[index] = this.innerHTML;
  9. var nav = document.createElement("nav");
  10. for (k = 0; k < stack.length; k++) {
  11.   if (stack[k] != "" && stack[k] != undefined) { //略过stack中的空项,重新向nav中添加span
  12.   var span = document.createElement("span");
  13.   var a = document.createElement("a");
  14.   a.innerHTML = "X";
  15.   a.href = "javascript:void(0);";
  16.   span.innerHTML = stack[k];
  17.   a.onclick = function() {
  18.   stack[index] = "";
  19.   nav.removeChild(this.parentNode);
  20.   }
  21.   span.appendChild(a);
  22.   nav.appendChild(span);
  23.   }
  24. }
  25. choose.insertBefore(nav, choose.children[0]);
  26. }
  27. }
复制代码
以上就是本文的全部内容,盼望对各人的学习有所资助,也盼望各人多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作