jQuery实现淘宝购物车小组件
我爱撸码，撸码使我感到快乐!
大家好，我是Counter，本章将实现淘宝购物车小组件，
用原生js可以实现吗，当然可以，可是就是任性一回，就是想用jQuery
来实现下。HTML代码不多才4行，CSS样式也不多，主要是功能，你要是能在里面输入除了0~20的整数，
算我输，嘿嘿。主要需求就是购物车里的商品可以是0到20件，少了不行，多了装不下，就是这样。(记得如果有bug就留
言我哦，我快马加鞭改bug，不过不能有bug，自信。。。)
效果如下：
主要是jQuery部分，每一行都有详细注释，欢迎一起探讨技术，一起成长。
( 在这边我用的jQuery是在线引入方式，大家可以去jQuery官网下载下来，离线引入的方式，都可以。
直接拷贝去用是行不通的，记得引入jQuery就可以了。)
代码给出：
<!DOCTYPE html>
<html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>淘宝购物车组件</title> <!-- CSS样式 --> <style> .cart { position: relative; width: 110px; height: 30px; /* border: 1px solid black; */ font-size: 0; } span { display: inline-block; width: 30px; height: 30px; text-align: center; line-height: 30px; font-size: 16px; background-color: #ededed; cursor: pointer; user-select: none; } input { position: absolute; top: 0; left: 30px; box-sizing: border-box; width: 50px; height: 30px; text-align: center; z-index: 999; } .cart span:nth-of-type(2) { position: absolute; right: 0; top: 0; } .cart .limit { background-color: #888; } </style> </head> <body> <div class="cart"> <span class="reduce">-</span> <input type="text" value="0"> <span class="plus">+</span> </div> <!-- 这边已经在线引入了，所有这个本地文件注释了 --> <!-- <script src="../jquery-3.3.1.js"></script> --> <!-- jQuery代码 --> <script> // 设置初始购物车商品数量值 var val = 0; // 给input标签绑定“input”事件，切记这边不绑定keydown事件，这个事件响应慢半拍，意味着在input中你输入1，它给你返回空，你再输入2，它给你返回1，因为它绑定的是键盘按下的那一瞬间，那个时候value值为空 $('input').on("input", function () { // 每次触发input事件，就执行cont函数，并传入0，这边的0并没有起到什么作用，知识为了传参而传参，是为了更好的配合，点击+或者点击-的事件 cont(0); // 当手动输入数字时，这边也需要进行一次判断，及时设置上相对应的不可点击背景色 lim(); }) // 设置lim函数，用于判定边界阈值，来确定不可点击的区域背景色 function lim() { // console.log('触发'); // 当输入框里为0时，那么-的区域颜色就变深（给这个元素增加class名，class名在css中已经提前设定好颜色了，下面同理） if (val === 0 ) { $('.reduce').addClass('limit');
$('.plus').removeClass('limit'); } // 当输入框为20时，那么+的区域颜色就变深 else if (val === 20) { $('.plus').addClass('limit');
$('.reduce').removeClass('limit'); } else { // 如果输入框里的值都不为0 或者 20 那么意味着，这两个区域都是可以再次点击的，所以移除这个class名 $('.limit').removeClass('limit');
} } // 当页面刷新时，就执行一次lim函数，确保0区域颜色深 lim(); // 每次触发input事件，都将触发cont函数 function cont(num) { // parseInt("2i") 会返回2，parseInt会尽可能的返回首部整数，其他位置不生效，意味着在原有的基础上，parseInt都将返回整数。所以这里如果款内原本为2的话，那么将不会进入第一个判断区，款里什么值，还是什么值。 val = parseInt($('input').val()) + num; // 如果val小于0，或者不是一个数的话那么就让val等于0，下面同理。 前面都说了，这边的基础上parseInt()返回都为整数，那么这边为什么要来个判读是不是一个数呢，因为这边如果把款里的数值用键盘的删除键删除的话，那么val将会是一个NaN，切记 if (val <= 0 || isNaN(val)) { val = 0 } else if ( val >= 20 ) { val = 20; } // 关键一步，设置款里的这个值为val $('input').val(val); } // 给-和+绑定点击事件 $(".reduce").add(".plus").on("click", function () { // 判定当前点击的jQuery对象是不是-所在的元素，如果是的话那么执行cont函数，并且传入参数-1，代表用户点击了减1，下面反之。 if ( $(this).hasClass('reduce') ) { cont(-1); } else { cont(1); } // 每次点击都要进行一次判定，判定当前的val是否到达阈值，并且改变背景颜色。 lim(); }) </script> </body> </html>
