Jquery实现购物车物品数量的加减特效

前端之家收集整理的这篇文章主要介绍了Jquery实现购物车物品数量的加减特效前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

今天网友翠儿在用Jquery实现购物车物品数量的加减特效的时候遇到问题来问我,我后来帮她解决了这个,现在把它整理出来分享给大家用,虽然功能比较简单,但是很实用。

 

主要包括了以下功能:

1、数量增加操作功能

2、数量减少操作功能

3、总价计算功能

4、自动判断数量到1的时候,减少操作按钮禁止点击,数量增加时自动恢复

5、保留小数点位数toFixed()函数非常实用

 

功能代码如下:

$(function(){
//获得文本框对象
var t = $("#text_box");
//数量增加操作
$("#add").click(function(){
t.val(parseInt(t.val())+1)
if (parseInt(t.val())!=1){
$('#min').attr('disabled',false);
}
setTotal();
})
//数量减少操作
$("#min").click(function(){
t.val(parseInt(t.val())-1);
if (parseInt(t.val())==1){
$('#min').attr('disabled',true);
}
setTotal();
})
//计算操作
function setTotal(){
$("#total").html((parseInt(t.val())*3.95).toFixed(2));//toFixed()是保留小数点的函数很实用哦
}
//初始化
setTotal();
})

 

 

效果如下:

Jquery实现购物车物品数量的加减特效

 

 

原文链接:https://www.f2er.com/jquery/403221.html

猜你在找的jQuery相关文章