<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/index.css">
<title>Document</title>
</head>
<body>
<div class="wrap">
<p>
<span>
<input type="checkbox" name="" id="" class="all">全选
</span>
<span>商品信息</span>
<span>单价</span>
<span>数量</span>
<span>金额</span>
<span>操作</span>
</p>
<ul>
</ul>
<p>
<input type="checkbox" name="" id="" class="all">全选
<span>删除</span>
</p>
</div>
<script src="./js/jquery.js"></script>
<script src="./js/data.js"></script>
<script>
// 1.渲染数据
var str = '';
for (var i = 0; i < data.length; i++) {
str += '<li>\
<input type="checkbox">\
<img src="'+ data[i].src + '" alt="">\
<p>'+ data[i].details + '</p>\
<span>\
<i>原价：</i><i>'+ data[i].original + '</i>\
<i>现价：</i><i>'+ data[i].current + '</i>\
</span>\
<span>\
<button class="cut">-</button><b>0</b><button class="add">+</button>\
</span>\
<span>0.00</span>\
<span>删除</span>\
</li>';
$('ul').html(str);
}
// +-
var n = 0;
$('.cut').click(function () {
var n = Number($(this).next('b').text());
console.log(n);
n--;
if (n <= 0) {
n = 0;
}
$(this).next('b').text(n);
// 金额
var price = (Number($(this).parent().prev().find('i').eq(3).text()) * n).toFixed(2);
$(this).parent().next().text(price)
})
$('.add').click(function () {
var n = Number($(this).prev('b').text());
console.log(n);
n++;
$(this).prev('b').text(n);
// 金额
var price = (Number($(this).parent().prev().find('i').eq(3).text()) * n).toFixed(2);
$(this).parent().next().text(price)
})
// 删除
$('li').on('click', 'span:last', function () {
$(this).parent().remove();
})
// 全选
$('.all').click(function () {
$('li').find(':checkbox').prop('checked', $(this).prop('checked'));
$('.all').prop('checked', $(this).prop('checked'));
})
// 点击底部删除删除所有li
$('p:last').find('span').click(function () {
var inp = $(this).parent().prev().find(':checkbox');
inp.each(function (i, v) {
if ($(v).prop('checked') == true) {
$(this).parent().remove();
}
})
})
// 7
$('li :checkbox').click(function () {
var inps = $('li :checkbox');
var n = 0;
inps.each(function(i,v){
console.log(inps.prop('checked') == true);
if($(v).prop('checked') == true){
n++;
if(n==inps.length){
$('.all').prop('checked',true);
}
}else{
$('.all').prop('checked',false);
}
})
})
//取消默认选中
let body = document.getElementsByTagName('body');
body.onselectstart=function(evs){
let ev = window.event || evs;
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
}
</script>
</body>
</html>
前端：jQuery,购物车案例
需积分: 0 7 浏览量
2022-03-28
19:29:37
上传
评论
收藏 134KB ZIP 举报
购物车.zip （9个子文件） 
day25实操 css 
index.css 1KB img 
2.jpg 10KB 1.jpg 2KB 3.jpg 4KB less index.less 2KB
index.html 4KB js jquery.js 282KB jquery.min.js 87KB data.js 735B
评论0