摘要：
这个jquery版的购物车计数功能插件是艺灵前段时间给公司做的，现在将原理及实现过程分享出来并提供源码下载......

前段时间一直忙于公司网站完善，然后艺灵写了大量的jquery插件。今晚来分享一款商品计数插件，动态效果演示图：

制作这个插件其实很简单，无非就是一个增加、一个减少及自定义输入数值功能。下面艺灵将制作此插件的完整流程及源码分享出来，如若看官有需要，可到文章未尾处下载源码。

功能构思

不管是写插件还是制作页面，构思是必不可少的步骤。如果构思的好，你可以用极精简的代码实现功能并且可重复利用，最大程度上让代码可重复利用是艺灵的目标。

逐步构造模型

在这个商品计数功能中，我们给减少功能的按钮命名为:.ylsj-del，增加功能的按钮命名为:.ylsj-add，数值框命名为:.ylsj-num。为了便于控制这一组功能，我们再给这三个元素添加一个父级:.ylsj-shopnum。

核心html源码

<div class="ylsj-shopnum">
　<span class="ylsj-del" title="减少">－</span>
　<input type="text" name="num" value="1" class="ylsj-num" />
　<span class="ylsj-add" title="增加">＋</span>
</div>

注意事项

1.既然是一个计数功能，这里只能填写数字了。但你并不能确定每一位用户都会输入数字，所以我们需要对其输入内容进行判断是否是数字。
2.在用户只能输入数字的前提下还要判断输入的值的范围，小于0及大于总库存都是不可取的。当然了，在提交订单后还会对其进行再次判断，那个就不说了。
3.当一切都正常后，增加和减少按钮都可以正常运行时还要注意用户随机输入数字，此时我们再点击增加或减少按钮时要从当前的数字进行操作。

一、判断输入类型

jquery限制只能输入正数

/*只能输入正数*/
$('input[name="num"]').keyup(function(){//键盘按下时执行
　this.value=this.value.replace(/[^\d]/g,'');//正则判断类型
});

二、输入范围判断及实现增减功能

jquery代码

$(function(){
　var $ylsj_sn=$('.ylsj-shopnum');/*定义变量名*/
　var i=1;/*定义初始值*/
　var $min=1;/*最小值*/
　var $max=99;/*最大值，实际过程中是取库存进行后续判断*/
　/*减少按钮功能*/
　$ylsj_sn.find('.ylsj-del').on('click',function(){
　　if(i>$min){i--};
　　$(this).siblings('.ylsj-num').val(i);/*显示框传值*/
　});
　/*增加按钮功能*/
　$ylsj_sn.find('.ylsj-add').on('click',function(){
　　if(i<$max){i++};
　　$(this).siblings('.ylsj-num').val(i);
　});
});

三、完善自定义值

上面的代码虽已能初步实现这个计数功能，但还有点不完美。如果用户直接输入一个数字如：20，此时再点击增删时应该以20为基准进行操作，而实际过程中还是以原来i=1的值来进行操作，所以需要做一小修改。

jquery代码

i=$(this).siblings('.ylsj-num').val();/*在第8行和原第13行插入*/

好了，此时我们的这个商品计数功能就已经完成了。为了更好的应用代码，艺灵已将此功能制作成一个插件，不需要看官手写数十行代码，只需要一行即可实现这个功能！

源码下载

demo[源码]jquery制作购物车计数插件.zip　

调用方法

<!--jquery插件库，必须引用，如已引用可忽略，建议引用1.8.3+版本-->
<script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
<!--引入商品计数插件-->
<script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/demojs/ylsjshopnum.js"></script>
<script type="text/javascript">
$(function(){
　/*调用商品计数插件*/
　$('样式名').ylsjshopnum({
　　ylsjs_num:"ylsj-num", 		        /*数量接收值框*/
　　ylsjs_add:"ylsj-add", 		        /*增加按钮*/
　　ylsjs_del:"ylsj-del"                /*删除按钮*/
    
　});
});
</script>

如果看官不想修改太多代码，可以直接引用艺灵写好的样式名，只修改css成你想要的样式即可。此时可以将上面的第8~12行代码精简到一行！

第8~12行精简版

$('.ylsj-shopnum').ylsjshopnum();

上面一行代码就可以实现这个计数功能，但一定要注意的是：页面中对应的样式名必须与艺灵默认的保持一致，如果亲想自定义，请按照前面的“调用方法”操作。

在使用过程有问题请在评论区中回复或私聊艺灵球球号。

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2015-09-30/323.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。