欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js购物车数量微调控件(基于jquery)

程序员文章站 2022-05-29 09:54:02
...

插件下载地址

支持场景:
(1)普通的数量微调,代码示例:

  $("div[data-spinner]").spinner({
            max: 11,  //最大值
            min:1,     //最小值
            value:3   //初始化值
       });

(2)支持回调模式,代码示例

  $("div[data-spinner]").spinner({
            max: 11,
            min:1,
            value:3,
            useDelete: false,
            //值改变时发生的回调
            changValue: function (spinnerContext) {

//                $.ajax({
//                    url:"http://wew"
//                }).then(function (data) {
//                    if(!data.isSuccss){
//                        spinnerContext.rollback();
//                    }
//                    console.log("success");
//                }).fail(function () {
//                    spinnerContext.rollback();
//                });
            },
            //当前值小于最小值的时候点击增加按钮调用的方法
            join: function () {
                console.log(" DefConfig.join();");
              console.log(  $("input.goods_number_amount").val());
            },
            //当前值等于最小值的时候点击减少按钮调用的方法
            remove: function () {
                console.log("remove")
            }
        });     

join、remove、changValue 这3个回调可以可以根据页面场景提供多个回调

(3) 这种场景比较复杂,如下图的场景js购物车数量微调控件(基于jquery)
左边是商品的分类,右边是商品列表(在有的页业务场景下,同一个商品会出现在多个分类下),若这个时候将A分类下的某件商品加入购物车,有可能在B分类下也有同样的这件商品,当切换到B分类的时候也要将这件商品加入购物车的状态标记出来
js购物车数量微调控件(基于jquery)js购物车数量微调控件(基于jquery)
要保持这2个状态的同步(当然,也可以在每次切换的时候去匹配每一个商品的状态,这个操作比较繁琐)。
插件的的思路是将这些数据区缓存,使用一个唯一的key做区分,调用代码如下

$("div[data-spinner]").spinner({
            key:""+goodsId,
            max: 11,
            min:1,
            value:3,
            useDelete: false,
            //值改变时发生的回调
            changValue: function (spinnerContext) {

//                $.ajax({
//                    url:"http://wew"
//                }).then(function (data) {
//                    if(!data.isSuccss){
//                        spinnerContext.rollback();
//                    }
//                    console.log("success");
//                }).fail(function () {
//                    spinnerContext.rollback();
//                });
            },
            //当前值小于最小值的时候点击增加按钮调用的方法
            join: function () {
                console.log(" DefConfig.join();");
              console.log(  $("input.goods_number_amount").val());
            },
            //当前值等于最小值的时候点击减少按钮调用的方法
            remove: function () {
                console.log("remove")
            }
        });     

这里使用商品id做为key,来保证对于同一个商品取到的是同一份数据缓存。

代码部分截图:
js购物车数量微调控件(基于jquery)

js购物车数量微调控件(基于jquery)

README.md
jquery.spinner
购物车数量调整插件 功能说明: (1) 数量调整控制,并使用 jquery.ba-throttle-debounce 的 debounce方法做输入或点击频率的控制 (2) 提供join和remove 以及changeValue的回调,用与和服务端做交互
注意事项: 由于控件内部使用了jquery delegate方法做事件代理,注意对于该控件的父元素的事件监听不能使用 event.stopPropagation() 否则将导致事件无法往上冒泡,导致功能失效。
新增参数 delegate:false取消事件代理
用法示例 参见 example.html