jq-demo-购物车
首页
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 ul, li {list-style: none;} 8 li { 9 width: 100px; 10 height: 230px; 11 border: 1px solid gray; 12 float: left; 13 margin-left: 10px; 14 cursor: pointer; 15 } 16 li img { 17 width: 100px; 18 height: 100px; 19 } 20 </style> 21 <script src="js/jquery-1.12.3.js"></script> 22 <script src="js/jquery.cookie.js"></script> 23 <script> 24 $(function(){ 25 26 //保存从json中获取到的商品数据 27 var myArr = []; 28 29 //添加点击事件 30 $("#list").on("click", "li", function(){ 31 //console.log(11); 32 33 //index 34 var index = $(this).index(); 35 36 //点击的商品的id 37 var id = myArr[index].id; 38 //console.log(id); 39 40 //进入详情页 41 location.href = "03_detail.html?id=" + id; 42 43 }) 44 45 //使用Ajax获取商品数据 46 $.get("json/goods.json", function(responseData){ 47 //console.log(responseData.data); 48 var arr = responseData.data; 49 myArr = arr; 50 51 //遍历arr 52 for (var i=0; i<arr.length; i++){ 53 var obj = arr[i]; //每个商品的数据 54 55 //创建li节点 56 var li = $("<li></li>").appendTo("#list"); 57 $("<img src="+ obj.img +" />").appendTo(li); //图片 58 $("<p>"+ obj.name +"</p>").appendTo(li); //名称 59 $("<p>"+ obj.unit + obj.price +"</p>").appendTo(li); //价格 60 $("<a href='#'>加入购物车</a>").appendTo(li); // 61 } 62 }) 63 64 //使用ajax获取商品数据方法2 65 // $.get("json/goods.json", function(data) { 66 // console.log(data); 67 // console.log(data.data); 68 // var arr = data.data; 69 // 70 // myArr = arr; 71 // var liHtml = ""; 72 // for(var i=0; i<arr.length; i++){ 73 // liHtml += `<li> 74 // <img src=${arr[i].img}/> 75 // <p>${arr[i].name}</p> 76 // <p>${arr[i].price}</p> 77 // <a href='#'>加入购物车</a> 78 // </li>`; 79 // $("#list").html(liHtml); 80 // } 81 82 83 //加入购物车 84 $("#list").on("click", "a", function(e){ 85 e.stopPropagation(); 86 //console.log(11); 87 88 var index = $(this).index("a"); 89 //console.log(index); 90 91 //当前要加入购物车的商品信息 92 var obj = myArr[index]; 93 94 95 var arr = $.cookie("cart") ? JSON.parse($.cookie("cart")) : []; 96 var isExist = false; 97 for (var i=0; i<arr.length; i++){ 98 if (arr[i].id == obj.id) { 99 arr[i].num++; 100 isExist = true; 101 } 102 } 103 if (!isExist) { 104 obj.num = 1; 105 obj.checked = true; //是否选中该商品 106 arr.push(obj); 107 } 108 109 $.cookie("cart", JSON.stringify(arr), {expires:30, path:"/"}); 110 console.log( $.cookie("cart") ) 111 }) 112 113 114 $("#gotoCart").click(function(){ 115 location.href = "05_myCart.html"; 116 }) 117 118 }) 119 </script> 120 </head> 121 <body> 122 <button id="gotoCart">结算</button> 123 <ul id="list"> 124 <!--<li> 125 <img src="images/1.jpg" /> 126 <p>单车</p> 127 <p>1000</p> 128 </li> 129 <li> 130 <img src="images/2.jpg" /> 131 <p>摩托</p> 132 <p>10000</p> 133 </li> 134 <li> 135 <img src="images/b1.jpg" /> 136 <p>汽车</p> 137 <p>100000</p> 138 </li> 139 <li> 140 <img src="images/b2.jpg" /> 141 <p>飞机</p> 142 <p>1000000</p> 143 </li>--> 144 </ul> 145 </body> 146 </html>
详情页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.12.3.js"></script>
<script>
$(function(){
//获取id值方法1
//?id=101
var id = location.search.slice(4);
console.log(location.search)
console.log(id); //101
//获取id值方法2
// var strUrl = window.location.toString();
// console.log(strUrl);
// var id = strUrl .substr(strUrl .lastIndexOf("id")+3,strUrl .length-strUrl .lastIndexOf("id="));
// console.log(id);//101
//获取id值方法2
// var id;
// var reg = new RegExp("(^|&)id=([^&]*)(&|$)");
// var r = window.location.search.substr(1).match(reg);
// console.log(r);
// if(r&&r.length>2){
// //escape() 来编码字符串，然后使用 unescape() 对其解码
// id = unescape(r[2]);
// }
// console.log(id);//101
$.get("json/goods.json", function(data){
var arr = data.data;
console.log(arr);
for(var i=0; i<arr.length; i++){
var boxHtml = '';
if(id == arr[i].id){
boxHtml = ` <img src=${arr[i].img} />
<p>${arr[i].name}</p>
<p>${arr[i].price}</p>`
$("#box").html(boxHtml);
}
}
})
//方法2
// $.get("json/goods.json", function(reponseData){
// var arr = reponseData.data;
// for (var i=0; i<arr.length; i++){
// var obj = arr[i];
// if (id == obj.id){
// //console.log(obj.name);
// //console.log(obj.price);
//
// //此时的obj就是当前商品的信息
// fn(obj);
// }
// }
// });
//
// function fn(obj){
// $("#box img").attr("src", obj.img);
// $("#box .name").html( obj.name );
// $("#box .price").html( obj.unit + obj.price );
// }
})
</script>
</head>
<body>
<h3>商品详情</h3>
<div id="box">
<img src="" />
<p class="name"></p>
<p class="price"></p>
</div>
</body>
</html>
购物车页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul, li {list-style: none;}
img {
width: 40px;
height: 30px;
}
.num {
width: 40px; text-align: center;
}
</style>
<script src="js/jquery-1.12.3.js"></script>
<script src="js/jquery.cookie.js"></script>
<script>
$(function(){
//刷新
refresh();
function refresh(){
//从cookie中获取购物车的数据
var arr = $.cookie("cart");
if (arr){
arr = JSON.parse(arr);
/*
* [
* {"id":101,"name":"单车","price":1000,"unit":"￥","img":"images/1.jpg","num":2},
* {"id":102,"name":"摩托","price":10000,"unit":"￥","img":"images/2.jpg","num":1}
* ]
*/
//先清空旧li节点
$("#list").empty();
//添加新的li节点
var total = 0; //总价
//遍历arr
for (var i=0; i<arr.length; i++){
var obj = arr[i]; //每个商品信息
//创建li节点
var li = $("<li></li>").appendTo("#list");
if (obj.checked == true) {
$("<input class='check' type='checkbox' checked='checked' />").appendTo(li); //复选框选中
}else {
$("<input class='check' type='checkbox' />").appendTo(li); //复选框未选中
}
$("<img src="+ obj.img +" />").appendTo(li); //图片
$("<span>"+ obj.name +"</span>").appendTo(li); //商品名称
$("<span>"+ obj.unit+ obj.price +"</span>").appendTo(li); //商品价格
$("<input class='sub' type='button' value='-' />").appendTo(li); //-
$("<input class='num' type='text' value="+ obj.num +" />").appendTo(li); //商品数量
$("<input class='add' type='button' value='+' />").appendTo(li); //+
$("<a class='del' href='#'>删除</a>").appendTo(li); //+
//如果当前商品选中了
if (obj.checked == true){
total += obj.price * obj.num;
}
}
//console.log(total);
$("#totalPrice").html( "￥" + total);
}
else {
console.log("购物车中没有数据");
}
}
//删除
$("#list").on("click", ".del", function(){
//console.log("删除");
var index = $(this).index(".del");
//console.log(index);
//1,修改cookie
var arr = JSON.parse($.cookie("cart"));
arr.splice(index, 1); //删除arr的第index个元素
$.cookie("cart", JSON.stringify(arr), {expires:30, path:"/"});
//2,调用refresh()
isCheckAll();
refresh();
})
//+
$("#list").on("click", ".add", function(){
var index = $(this).index(".add");
var arr = JSON.parse($.cookie("cart"));
arr[index].num++;
$.cookie("cart", JSON.stringify(arr), {expires:30, path:"/"});
refresh();
})
//-
$("#list").on("click", ".sub", function(){
var index = $(this).index(".sub");
var arr = JSON.parse($.cookie("cart"));
arr[index].num--;
if (arr[index].num <= 0){
arr[index].num = 1;
}
$.cookie("cart", JSON.stringify(arr), {expires:30, path:"/"});
refresh();
})
//勾选/取消勾选
$("#list").on("click", ".check", function(){
var index = $(this).index(".check");
var arr = JSON.parse($.cookie("cart"));
arr[index].checked = !arr[index].checked;
$.cookie("cart", JSON.stringify(arr), {expires:30, path:"/"});
isCheckAll();
refresh();
})
//点击全选
$("#checkAll").click(function(){
//console.log($(this).prop("checked"));
var arr = JSON.parse($.cookie("cart"));
$.each(arr, function(i) {
if ( $("#checkAll").prop("checked") ){//全选
arr[i].checked = true;
}
else { //取消全选
arr[i].checked = false;
}
});
$.cookie("cart", JSON.stringify(arr), {expires:30, path:"/"});
refresh();
})
//判断是否全选
//在jquery中应该使用prop方法来获取和设置checked属性，不应该使用attr。
isCheckAll();
function isCheckAll(){
var arr = JSON.parse($.cookie("cart"));
var sum = 0;
for (var i=0; i<arr.length; i++){
sum += arr[i].checked;
}
if (arr.length == 0) {
$("#checkAll").prop("checked", false);
}
else if (sum == arr.length) { //全选
$("#checkAll").prop("checked", true);
}
else { //未全选
$("#checkAll").prop("checked", false);
}
}
//删除选中
$("#delSelect").click(function(){
/*
var arr = JSON.parse($.cookie("cart"));
for (var i=arr.length-1; i>=0; i--){
if (arr[i].checked == true){
arr.splice(i, 1);
}
}
$.cookie("cart", JSON.stringify(arr), {expires:30, path:"/"});
*/
var arr = JSON.parse($.cookie("cart"));
var newArr = [];
for (var i=0; i<arr.length; i++){
if (arr[i].checked == false){
newArr.push(arr[i]);
}
}
$.cookie("cart", JSON.stringify(newArr), {expires:30, path:"/"});
isCheckAll();
refresh();
})
})
</script>
</head>
<body>
<h2>我的购物车</h2>
全选<input id="checkAll" type="checkbox" checked="checked" />
<ul id="list">
<!--<li>
<input type="checkbox" />
<img src="images/1.jpg" />
<span>单车</span>
<span>$1000</span>
<input type="button" value="-" />
<input class="num" type="text" value="1" />
<input type="button" value="+" />
<a href="#">删除</a>
</li>
<li>
<input type="checkbox" />
<img src="images/1.jpg" />
<span>单车</span>
<span>$1000</span>
<input type="button" value="-" />
<input class="num" type="text" value="1" />
<input type="button" value="+" />
<a href="#">删除</a>
</li>-->
</ul>
<a id="delSelect" href="#">删除选中</a>
<div>总价： <span id="totalPrice">0</span></div>
</body>
</html>
