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) 这种场景比较复杂,如下图的场景
左边是商品的分类,右边是商品列表(在有的页业务场景下,同一个商品会出现在多个分类下),若这个时候将A分类下的某件商品加入购物车,有可能在B分类下也有同样的这件商品,当切换到B分类的时候也要将这件商品加入购物车的状态标记出来
要保持这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,来保证对于同一个商品取到的是同一份数据缓存。
代码部分截图:
README.md
jquery.spinner
购物车数量调整插件 功能说明: (1) 数量调整控制,并使用 jquery.ba-throttle-debounce 的 debounce方法做输入或点击频率的控制 (2) 提供join和remove 以及changeValue的回调,用与和服务端做交互
注意事项: 由于控件内部使用了jquery delegate方法做事件代理,注意对于该控件的父元素的事件监听不能使用 event.stopPropagation() 否则将导致事件无法往上冒泡,导致功能失效。
新增参数 delegate:false取消事件代理
用法示例 参见 example.html