如何制作商城网站中的商品加减按钮

商城网站中的商品加减按钮在商城网站非常常见，是给用户来增加和减少商品的数量的。效果如下图：

以下就是商城网站中制作商品加减按钮的代码：

HTML代码：

<div class="product_number clearfix">

<em>数量：</em>

<span class="reduce">-</span>

<input type="text" name="AddCount" id="AddCount" value="1">

<span class="add">+</span>

</div>

<div class="product_allprice">

总价：¥ <span id="allprice"><?php echo get_post_meta($post->ID,'xianjia_value',true);?></span>

</div>

JQUERY代码：

<script>

var xj = $('#xj').text();//现价

$('.add').click(function(){

var zhi = $('#AddCount').val();

$('#AddCount').val(zhi*1+1)

$('#allprice').text((xj*1*(zhi*1+1)).toFixed(2));

})

$('.reduce').click(function(){

var zhi = $('#AddCount').val();

if(zhi>1){

$('#AddCount').val(zhi*1-1);

$('#allprice').text((xj*1*(zhi*1-1)).toFixed(2));

}

})

$('#AddCount').change(function(){

var zhi = $('#AddCount').val();

$('#allprice').text((xj*1*zhi).toFixed(2));

})

</script>