jquey购物车加减数量功能

  |   前端 Javascript

正是公司的项目需要，大部分购物车都离不开这个功能。小小的总结，学到了新的知识，如果以后遇到项目的时候就用这个吧。

先写html文件代码如下：

<!--shop_num start-->
<div class="shop_num"> 
  <em class="jian">-</em>
    <input type="text" value="1" class="num"/>
  <em class="add">+</em>
</div>
<!--shop_num end-->

购物车加减数量功能的样式

.shop_num {
    border: 1px solid #dbdbdb;
    width: 110px;
    line-height: 26px;
    overflow: hidden;
}
.shop_num em {
    display: block;
    height: 26px;
    width: 26px;
    float: left;
    color: #7A7979;
    border-right: 1px solid #dbdbdb;
    text-align: center;
    cursor: pointer;
}
.shop_num .num {
    display: block;
    float: left;
    text-align: center;
    width: 52px;
    font-style: normal;
    font-size: 14px;
    line-height: 24px;
    border: 0;}
    .shop_num em.add {
    float: right;
    border-right: 0;
    border-left: 1px solid #dbdbdb;
}

jquery写个加减数量功能

$(document).ready(function(){
//加的数量功能
$(".add").click(function(){
    var n=$(this).prev().val();
    var num=parseInt(n)+1;
    if(num==0){ return;}
    $(this).prev().val(num);
});
//减的数量功能
$(".jian").click(function(){
    var n=$(this).next().val();
    var num=parseInt(n)-1;
    if(num==0){ return}
    $(this).next().val(num);
    });
})

别忘了要加jquery插件吧，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="js/jquery.min.js"></script>
</head>
<body>
	
</body>
</html>

最终效果图：
Snip20160924 14

还要设置商品的库存量有最大和最小，如果数量0的时候，点击－的按钮自动隐藏；如果数量加1的时候会显示－的按钮，还有底部结算按钮的效果等我们以后要写个完善购物车的功能。