如何制作商城网站中的商品加减按钮
商城网站中的商品加减按钮在商城网站非常常见,是给用户来增加和减少商品的数量的。效果如下图:
以下就是商城网站中制作商品加减按钮的代码:
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>