jQuery购物车
- 效果图
-
HTML代码:(非表格方式)
<div class="nav2">
<input type="checkbox" class="checkAll" /> 全选
<span>商品信息</span>
<ul class="fr">
<li>单价</li>
<li>数量</li>
<li>小计</li>
<li>操作</li>
</ul>
</div>
<div class="goods">
<input type="checkbox" class="check"/>
<span class="img"><img src="../img/d.png" /></span>
<p class="goods_p">
耐克(nike)802611-001 AIR<br />
MAX减震复古休闲鞋 运动鞋 奥<br />
利奥配色 US9码42.5码
</p>
<p class="goods_p1">
颜色:黑色<br />
尺码:40.5
</p>
<ul class="fr">
<li>
<span class="goods_sp">¥999.00</span><br />
<span class="goods_sp1">¥<span class="price">748.00</span></span><br />
<span class="goods_sp2">卖家促销</span>
</li>
<li><span class="goods_sp3"><img src="../img/jia.png" class="cut" />
<span class="num">1</span>
<img src="../img/jia1.png" class="add"/></span>
</li>
<li><span class="goods_sp4">¥<span class="total">748</span></span></li>
<li>
<button >移入我的收藏</button>.
<button >删除</button>
</li>
</ul>
</div>
<div class="goods">
<input type="checkbox" class="check"/>
<span class="img"><img src="../img/d.png" /></span>
<p class="goods_p">
耐克(nike)802611-001 AIR<br />
MAX减震复古休闲鞋 运动鞋 奥<br />
利奥配色 US9码42.5码
</p>
<p class="goods_p1">
颜色:黑色<br />
尺码:40.5
</p>
<ul class="fr">
<li >
<span class="goods_sp">¥999.00</span><br />
<span class="goods_sp1">¥<span class="price">748.00</span></span><br />
<span class="goods_sp2">卖家促销</span>
</li>
<li><span class="goods_sp3"><img src="../img/jia.png" class="cut" />
<span class="num">1</span>
<img src="../img/jia1.png" class="add"/></span>
</li>
<li><span class="goods_sp4">¥<span class="total">748</span></span></li>
<li>
<button >移入我的收藏</button>.
<button >删除</button>
</li>
</ul>
</div><div class="goods2">
<input type="checkbox" class="checkAll1" />
<span class="goods2_sp">全选</span>
<span class="goods2_sp1"><a href="#">删除选择中的商品</a>
 <a href="#">移到我的关注</a>
 <a href="#">清除下柜商品</a>
</span>
<p class="goods2_p"> 已选择<span class="color" id="allNum">0</span>件商品
<img src="../img/sanjiao.png" />
</p>
<p class="goods2_p1">
总价:<span class="color" id="all">¥0.00</span>
<br />
已节省:-¥0.00
</p>
<button>去结算</button>
</div> - jQuery代码:
$(function() {
$(".add").click(function(e) {
var quantity = parseInt($(this).prev().text());
$(this).prev().text(quantity + 1);
//计算每件商品总价
var price = parseInt($(this).parents("li").prev().find(".price").text());
var num = parseInt($(this).prev().text());
$(this).parents('li').next().find('.total').text((price * num).toFixed(2));
e.preventDefault()
setTotal();
});
//减的计算
$(".cut").click(function(e) {
var quantity = parseInt($(this).next().text());if(quantity > 1) {
$(this).next().text(quantity - 1);
};var price = parseInt($(this).parents("li").prev().find(".price").text());
var num = parseInt($(this).next().text());
//小计
$(this).parents('li').next().find('.total').text((price * num).toFixed(2));
e.preventDefault()
setTotal();
});
//计算总价
function setTotal() {var total = 0;
var totalPrice = 0;
//$('.check').each(function() {
//if($(this).hasClass("status")) {
$(".status .num").each(function() {
total += parseInt($(this).text());
});
$(".status .total").each(function() {
totalPrice += parseInt($(this).text());
});
$("#allNum").text(total);
$("#all").text(totalPrice);
//}
//});}
//全选
$('.checkAll').click(function(){
if($('.checkAll').prop("checked")==true){
$('.check').prop("checked",true);
$('.check').parent().addClass("status");
setTotal();
}else{
$('.check').prop("checked",false);
$('.check').parent().removeClass("status");
setTotal();
}
});
// 单选
$(".check").click( function(){
$(this).each(function(){
if($(this).prop("checked")==true){
$(this).parent().addClass("status");//添加勾选样式
setTotal();
}else{
$(this).parent().removeClass("status");//取消勾选样式
setTotal();
}
});
});});
jQuery购物车的更多相关文章
- JQuery购物车多物品数量的加减+总价计算
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery 购物车鼠标经过出现下拉框的做法
这一段时间在学习web前端,最近学了jQuery库,深感其强大,下面通过写购物车的下拉框做法,把自己的理解和大家交流一下,欢迎各位大神指点指正,废话不多说,开始正题: 购物车html: <!-- ...
- Jquery购物车jsorder改进版,支持后台处理程序直接转换成DataTable处理
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- jQuery 购物车
html代码 <!--shoppingCar start--> <table id="TB"> <tr> <td colspa ...
- jquery购物车添加功能
<html> <head> <meta charset="UTF-8"> <title></title> <scr ...
- jQuery 购物车案例
h1 { text-align: center; } .cart { width: 1200px; height: 600px; margin: 0 auto; border: 1px solid # ...
- jquery 购物车飞入效果
github https://github.com/amibug/fly demo https://github.com/amibug/fly
- jquery购物车计算总价
//计算总价 function cartTotal(){ var total = 0; //循环计算的列,选中计算的数量和价格 //accAdd为精BigDecimal准计算方法 $.each($(& ...
- jquery购物车全选,取消全选,计算总金额
这是html代码 <div class="gwcxqbj"> <div class="gwcxd center"> <div cl ...
随机推荐
- java继承(一)
虽然说java中的面向对象的概念不多,但是具体的细节还是值得大家学习研究,java中的继承实际上就是子类拥有父类所有的内容(除私有信息外),并对其进行扩展.下面是我的笔记,主要包含以下一些内容点: 构 ...
- POJ 2125 Destroying The Graph 二分图 最小点权覆盖
POJ2125 题意简述:给定一个有向图,要通过某些操作删除所有的边,每一次操作可以选择任意一个节点删除由其出发的所有边或者通向它的所有边,两个方向有不同的权值.问最小权值和的解决方案,要输出操作. ...
- win8 wifi开关显示关闭,且设置里面wifi开关显示灰色的解决办法
只要从华硕官网下载驱动,电源管理驱动,安装下面显示的几个软件即可,然后重启电脑,即可看见wifi热点,另外设置里面的wifi开关也将显示正常(刚开始安装了个驱动人生根本没用,最后在华硕官网下载了个电源 ...
- 关于 <textarea ></textarea >标签在苹果微信浏览器出现 内阴影
解决方法:(去除浏览器默认的样式元素) textarea { box-shadow:0px 0px 0px rgba(0,0,0,0); -webkit-appearance:none; }
- 第三章:初识Jquery
一.Jquery的优势 体积小,压缩后只有100KB左右 强大的选择器 出色的DOM封装 可靠的事件处理机制 出色的浏览器兼容性 使用隐式迭代简化编程 丰富的插件支持 二.Jquery语法 三.DOM ...
- 一张图理解RACSignal的Subscription过程
通过下面一张图理解RACSignal的调用过程: 创建signale RACSignal通过子类[RACDynamicSignal createSignal:]方法获得Signal,并将disSubs ...
- [Hadoop] - Hadoop3.0.x编译
这里仅介绍一种Hadoop3.0.x版本的源码编译方式 编译过程 1. 下载源码 2. 安装依赖环境 3. 源码编译 ========================================= ...
- vpn服务搭建
先安装pptpd服务,就是VPN连接的软件模块. 输入:yum install ppp iptables pptpd 安装完成之后 A:编辑pptpd.conf: 输入:vim /etc/pptpd. ...
- QTP11完美破解小笔记
相比Loadrunner的破解,QTP的应该会更简单,但是效果并没有Loadrunner的长久.QTP的破解只能维持30天,每30天需要再进行如下操作: 1.到C:\ProgramData目录下面去删 ...
- rem与em
最近有朋友在进行rem布局的时候总搞不懂rem em px 与百分比布局的区别在哪里 这里简单给大家介绍一下 Em为单位: 这种技术需要一个参考点,一般都是以<body>的&quo ...