一款jQuery移动端购物车增减商品时自动计算总价的特效,自动计算所选商品的总价,当发生商品增减时,价格也会随之变化,整体的样式比较漂亮,另外,全选功能也是很实用的,喜欢的童鞋请收下把。
页面head部分需要先引入jQuery库,接着引入CSS样式文件和其他的JS文件,并定义一些全局变量,代码如下:
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<!-- ionic框架 css -->
<link type="text/css" rel="stylesheet" href="css/weixin.css" />
<link type="text/css" rel="stylesheet" href="css/ionic.min.css" />
<link type="text/css" rel="stylesheet" href="css/signin.css" />
<link type="text/css" rel="stylesheet" href="css/share.css" />
<!-- ionic框架 js -->
<script type="text/javascript" src="js/ionic.bundle.min.js" ></script>
<script type="text/javascript" src="js/runend.js"></script>
<script type="text/javascript">
//定义全局变量
var i=0;
//金额总和
var money=0;
//计算合计价格
var cart_money=new Object();
//全部商品ID
var cart_id=new Object();
//备份商品ID,用于全选后去掉全选又再次全选
var cart_id_copy=new Object();
</script>
页面的body部分,重点是讲所有商品放在一个form表单里面,结构不算复杂,代码如下:
<form method="post" name="cart_form" target="_self" id="cart_form" action="">
<!--list-->
<div class="commodity_list_box">
<div class="cart_top">
<span>商品清单</span>
<p id="weights">总重量约25kg</p>
<div class="clear"></div>
</div>
<!--商品列表-->
<div class="commodity_box">
<div class="commodity_list">
<!--店名信息-->
<div class="tite_tim select">
<em aem="1" cart_id="84"></em>
<span>momo</span>
<div class="clear"></div>
</div>
<!--商品-->
<ul class="commodity_list_term">
<li class="select">
<em aem="0" cart_id="84"></em>
<img src="images/33d332dbca4e027fbc270db34a1a915d.png" />
<div class="div_center">
<h4>新疆苹果</h4>
<span>50斤</span>
<p class="now_value"><i>¥</i><b class="qu_su">120.00</b></p>
</div>
<div class="div_right">
<i onclick="reducew(this)">-</i>
<span class="zi">1</span>
<input type="hidden" value="84">
<i onclick="plusw(this)">+</i>
</div>
</li>
<li class="select">
<em aem="0" cart_id="84"></em>
<img src="images/33d332dbca4e027fbc270db34a1a915d.png" />
<div class="div_center">
<h4>新疆苹果</h4>
<span>50斤</span>
<p class="now_value"><i>¥</i><b class="qu_su">10.00</b></p>
</div>
<div class="div_right">
<i onclick="reducew(this)">-</i>
<span class="zi">1</span>
<input type="hidden" value="84">
<i onclick="plusw(this)">+</i>
</div>
</li>
</ul>
<!--优惠信息-->
<div class="shop_ul_bottom account_info_box">
<ul class="account_info">
<li class="i_text">
<span class="info_name xi_cu">包邮</span>
<span class="info_name">商家包邮</span>
</li>
</ul>
</div>
</div>
</div>
<div class="commodity_box">
<div class="commodity_list">
<!--店名信息-->
<div class="tite_tim select">
<em aem="1" cart_id="84"></em>
<span>momo</span>
<div class="clear"></div>
</div>
<!--商品-->
<ul class="commodity_list_term">
<li class="select">
<em aem="0" cart_id="84"></em>
<img src="images/33d332dbca4e027fbc270db34a1a915d.png" />
<div class="div_center">
<h4>新疆苹果</h4>
<span>50斤</span>
<p class="now_value"><i>¥</i><b class="qu_su">160.00</b></p>
</div>
<div class="div_right">
<i onclick="reducew(this)">-</i>
<span class="zi">1</span>
<input type="hidden" value="84">
<i onclick="plusw(this)">+</i>
</div>
</li>
<li class="select">
<em aem="0" cart_id="84"></em>
<img src="images/33d332dbca4e027fbc270db34a1a915d.png" />
<div class="div_center">
<h4>新疆苹果</h4>
<span>50斤</span>
<p class="now_value"><i>¥</i><b class="qu_su">20.00</b></p>
</div>
<div class="div_right">
<i onclick="reducew(this)">-</i>
<span class="zi">1</span>
<input type="hidden" value="84">
<i onclick="plusw(this)">+</i>
</div>
</li>
</ul>
<!--优惠信息-->
<div class="shop_ul_bottom account_info_box">
<ul class="account_info">
<li class="i_text">
<span class="info_name xi_cu">包邮</span>
<span class="info_name">商家包邮</span>
</li>
</ul>
</div>
</div>
</div>
<!-- 商品列表 end -->
</div>
<!-- end -->
<!-- footer -->
<div style="height:55px;"></div>
<div class="settle_box">
<dl class="all_check select">
<dt><span id="all_pitch_on"></span><em>全选</em></dt>
</dl>
<dl class="total_amount">
<dt>合计:<p id="total_price">¥<b>0</b></p></dt>
<dd>不含运费</dd>
</dl>
<input type="hidden" name="gcs" id="gcs" />
<a class="settle_btn" href="javascript:void(0);" id="confirm_cart">结算</a>
<a class="settle_btn" href="javascript:void(0);" id="confirm_cart1" onclick="big_cart_remove()">删除</a>
</div>
<!-- end -->
</form>
页面的底部需要对商品的增减、价格变化等事件进行响应,部分代码如下:
//选择结算商品
$(".select em").click(function(){
var su = $(this).attr("aem");
var carts_id=$(this).attr("cart_id");
var totalH = $("#total_price b").text(); /* 合计金额 */
if(su == 0){
/* 单选商品 */
if($(this).hasClass("pitch_on")){
/*去该店全选*/
$(this).parents("ul").siblings(".select").find("em").removeClass("pitch_on");
/*去底部全选*/
$("#all_pitch_on").removeClass("pitch_on");
$(this).removeClass("pitch_on");
reduceMod($(this),totalH);
cart_id[carts_id]="";
delete cart_id[carts_id];
}else{
$(this).addClass("pitch_on");
var n = $(this).parents("ul").children().find(".pitch_on");
var n1 = $(this).parents("ul").children();
plusMod($(this),totalH,0,noX);
cart_id[carts_id]="";
/*该店商品全选中时*/
if(n.length == n1.length){
$(this).parents("ul").siblings(".select").find("em").addClass("pitch_on");
}
/*商品全部选中时*/
var fot = $(".commodity_list_box .tite_tim .pitch_on");
var fot1 = $(".commodity_list_box .tite_tim em");
if(fot.length == fot1.length)
$("#all_pitch_on").addClass("pitch_on");
}
}else{
/* 全选该店铺 */
if($(this).hasClass("pitch_on")){
/*去底部全选*/
$("#all_pitch_on").removeClass("pitch_on");
$(this).removeClass("pitch_on");
commodityReduceMod($(this),totalH);
$(this).parent().siblings("ul").find("em").removeClass("pitch_on");
delete cart_id[carts_id];
}else{
commodityReduceMod($(this),totalH);
$(this).addClass("pitch_on");
$(this).parent().siblings("ul").find("em").addClass("pitch_on");
if(plus != NaN && plus != undefined){
totalH = parseFloat(totalH)-parseFloat(plus);
}
commodityPlusMod($(this),totalH);
cart_id[carts_id]="";
/*商品全部选中时*/
var fot = $(".commodity_list_box .tite_tim .pitch_on");
var fot1 = $(".commodity_list_box .tite_tim em");
if(fot.length == fot1.length)
$("#all_pitch_on").addClass("pitch_on");
}
}
//计算选择数值
number();
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791