用jQuery购物车结算
HTML:
-
<div class="pro-main">
-
<div class="cart-info">
-
<div class="all"><input type="checkbox" class="allCheck">全选</div>
-
<div class="pro-info">商品信息</div>
-
<div class="dj-price">单价</div>
-
<div class="num-pro">数量</div>
-
<div class="zj-price">金额</div>
-
<div class="cz">操作</div>
-
</div>
-
<div class="cart-main">
-
<div class="cart-item">
-
<div class="cart-j fl">
-
<input type="checkbox" class="j-check">
-
</div>
-
<div class="pro-item fl">
-
<div class="pro-img fl"><img src="https://www.jq22.com/img/cs/500x500-1.png" alt=""></div>
-
<div class="pro-title fl">西部数据(WD)蓝盘 1TB</div>
-
<div class="pro-gg fl">SATA6Gb/s 7200转64MB 台式机械硬盘(WD10EZEX)</div>
-
</div>
-
<div class="price-g fl">¥28.60</div>
-
<div class="price-num fl">
-
<a href="javascript:;" class="increment"> </a>
-
<input type="text" value="1" class="num">
-
<a href="javascript:;" class="decrement">-</a>
-
</div>
-
<div class="price-jiner fl">¥28.60</div>
-
<div class="price-caozuo fl"><a href="javascript:;" class="del-d">删除</a></div>
-
</div>
-
<div class="cart-item">
-
<div class="cart-j fl">
-
<input type="checkbox" class="j-check">
-
</div>
-
<div class="pro-item fl">
-
<div class="pro-img fl"><img src="https://www.jq22.com/img/cs/500x500-1.png" alt=""></div>
-
<div class="pro-title fl">西部数据(WD)蓝盘 1TB</div>
-
<div class="pro-gg fl">SATA6Gb/s 7200转64MB 台式机械硬盘(WD10EZEX)</div>
-
</div>
-
<div class="price-g fl">¥28.60</div>
-
<div class="price-num fl">
-
<a href="javascript:;" class="increment"> </a>
-
<input type="text" value="1" class="num">
-
<a href="javascript:;" class="decrement">-</a>
-
</div>
-
<div class="price-jiner fl">¥28.60</div>
-
<div class="price-caozuo fl"><a href="javascript:;" class="del-d">删除</a></div>
-
</div>
-
<div class="cart-item">
-
<div class="cart-j fl">
-
<input type="checkbox" class="j-check">
-
</div>
-
<div class="pro-item fl">
-
<div class="pro-img fl"><img src="https://www.jq22.com/img/cs/500x500-1.png" alt=""></div>
-
<div class="pro-title fl">西部数据(WD)蓝盘 1TB</div>
-
<div class="pro-gg fl">SATA6Gb/s 7200转64MB 台式机械硬盘(WD10EZEX)</div>
-
</div>
-
<div class="price-g fl">¥28.60</div>
-
<div class="price-num fl">
-
<a href="javascript:;" class="increment"> </a>
-
<input type="text" value="1" class="num">
-
<a href="javascript:;" class="decrement">-</a>
-
</div>
-
<div class="price-jiner fl">¥28.60</div>
-
<div class="price-caozuo fl"><a href="javascript:;" class="del-d">删除</a></div>
-
</div>
-
</div>
-
<div class="cart-info">
-
<div class="all fl"><input type="checkbox" class="allCheck">全选</div>
-
<div class="fl">
-
<a href="javascirpt:;" class="clearAll">删除</a>
-
<a href="javascirpt:;" class="All-a">清除购物车的宝贝</a>
-
</div>
-
<div class="fr" style="width: 500px;">
-
<div class="spnum fl">
-
已选商品<em>0</em>件
-
</div>
-
<div class="priceAll fl">合计(不含运费): <span>0.00</span></div>
-
<div class="jiesuan fr"><a href="#" class="js-btn">结算</a></div>
-
</div>
-
</div>
-
</div>
css:
-
* {
-
margin:0;
-
padding:0;
-
}
-
body {
-
font-size:13px;
-
}
-
input {
-
vertical-align:middle;
-
}
-
a {
-
text-decoration:none;
-
color:#333333;
-
}
-
.fl {
-
float:left;
-
}
-
.fr {
-
float:right;
-
}
-
.pro-main {
-
width:1000px;
-
margin:100px auto;
-
}
-
.cart-info .all,.cart-info .pro-info,.cart-info .dj-price,.cart-info .num-pro,.cart-info .zj-price,.cart-info .cz {
-
float:left;
-
}
-
.cart-info {
-
height:40px;
-
line-height:40px;
-
background-color:#EFEFEF;
-
}
-
.cart-info .all {
-
width:80px;
-
padding:0px 15px;
-
}
-
.cart-info .all input {
-
margin-right:8px;
-
}
-
.cart-info .pro-info {
-
width:500px;
-
}
-
.cart-info .dj-price {
-
width:80px;
-
}
-
.cart-info .num-pro {
-
width:120px;
-
}
-
.cart-info .zj-price {
-
width:110px;
-
}
-
.cart-info .cz {
-
width:80px;
-
}
-
.cart-main {
-
margin-top:15px;
-
}
-
.cart-item {
-
border:1px solid #EFEFEF;
-
padding:15px;
-
overflow:hidden;
-
margin-bottom:15px;
-
}
-
.cart-j {
-
width:30px;
-
}
-
.pro-item {
-
width:560px;
-
}
-
.pro-item .pro-img {
-
width:80px;
-
height:80px;
-
}
-
.pro-item .pro-title {
-
width:225px;
-
line-height:1.8;
-
padding:0px 15px;
-
}
-
.pro-item .pro-gg {
-
width:185px;
-
padding:0px 15px;
-
font-size:10px;
-
color:#666;
-
}
-
.price-g {
-
width:80px;
-
color:black;
-
font-weight:bold;
-
}
-
.price-num {
-
width:95px;
-
margin-right:30px;
-
background-color:#EFEFEF;
-
/* border:1px solid #EFEFEF;
-
*/
-
}
-
.price-num .increment,.price-num .decrement {
-
width:20px;
-
float:left;
-
text-align:center;
-
}
-
.price-num .num {
-
float:left;
-
width:50px;
-
text-align:center;
-
}
-
.price-jiner {
-
width:110px;
-
color:red;
-
font-weight:bold;
-
}
-
.price-caozuo {
-
width:40px;
-
}
-
.priceAll {
-
margin:0px 20px;
-
}
-
.priceAll span {
-
padding:0px 8px;
-
color:#f22d00;
-
font-weight:bold;
-
font-size:15px;
-
}
-
.spnum em {
-
font-style:normal;
-
padding:0px 8px;
-
color:#f22d00;
-
font-weight:bold;
-
font-size:15px;
-
}
-
.js-btn {
-
display:block;
-
width:100px;
-
text-align:center;
-
background-color:#f22d00;
-
color:white;
-
}
-
.pro-item img {
-
width:80px;
-
}
js:
$(function() {
// 1、全选 全不选
$('.allCheck').change(function() {
if ($(this).prop('checked')) {
$('.j-check,.allCheck').prop('checked', true);
getSum();
} else {
$('.j-check,.allCheck').prop('checked', false);
$('.spnum em').text(0);
$('.priceAll span').text(0.00);
}
});
// 2、下面的小复选框
$('.j-check').change(function() {
// 小复选框全部选中,则全选选中
if ($('.j-check:checked').length === $('.j-check').length) {
$('.allCheck').prop('checked', true);
} else {
$('.allCheck').prop('checked', false);
}
// 商品数量
getSum();
});
// 3、商品数量增加
$('.increment').click(function() {
var n = $(this).siblings('.num').val();
n ;
$(this).siblings('.num').val(n);
// 商品金额 跟随 商品数量变化 金额 = 商品数量 * 商品单价
var p = $(this).parent('.price-num').siblings('.price-g').text();
p = p.substr(1);
$(this).parent('.price-num').siblings('.price-jiner').text('¥' (n * p).toFixed(2));
getSum();
});
// 4、商品数量减少
$('.decrement').click(function() {
var n = $(this).siblings('.num').val();
n--;
if (n <= 1) {
n = 1;
}
$(this).siblings('.num').val(n);
// 商品金额 跟随 商品数量变化
var p = $(this).parent('.price-num').siblings('.price-g').text();
p = p.substr(1);
$(this).parent('.price-num').siblings('.price-jiner').text('¥' (n * p).toFixed(2));
});
// 5、修改数量
$('.num').change(function() {
var n = $(this).val();
var p = $(this).parent('.price-num').siblings('.price-g').text().substr(1);
$(this).parent('.price-num').siblings('.price-jiner').text('¥' (n * p).toFixed(2));
getSum();
});
// 5、删除
// (1)删除当前商品
$('.del-d').click(function() {
$(this).parents('.cart-item').remove();
getSum();
});
// (2)删除选中的商品
$('.clearAll').click(function() {
$('.j-check:checked').parents('.cart-item').remove();
getSum();
});
// (3) 删除所有的商品
$('.All-a').click(function() {
$('.cart-item').remove();
getSum();
})
//
// 商品价格
getSum();
function getSum() {
// 总数量
var num = 0;
// 总价
var money = 0;
// 遍历
$('.num').each(function(i, ele) {
if ($(this).parent('.price-num').siblings('.cart-j').find('.j-check').prop('checked')) {
num = parseInt($(ele).val());
$('.spnum em').text(num);
}
});
$('.price-jiner').each(function(i, ele) {
if ($(this).siblings('.cart-j').find('.j-check').prop('checked')) {
money = parseFloat($(ele).text().substr(1));
$('.priceAll span').text(money.toFixed(2));
}
})
}
})
实现效果:
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgbhbca
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01