jq-demo-购物车
首页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul, li {list-style: none;}
li {
width: 100px;
height: 230px;
border: 1px solid gray;
float: left;
margin-left: 10px;
cursor: pointer;
}
li img {
width: 100px;
height: 100px;
}
</style>
<script src="js/jquery-1.12.3.js"></script>
<script src="js/jquery.cookie.js"></script>
<script>
$(function(){ //保存从json中获取到的商品数据
var myArr = []; //添加点击事件
$("#list").on("click", "li", function(){
//console.log(11); //index
var index = $(this).index(); //点击的商品的id
var id = myArr[index].id;
//console.log(id); //进入详情页
location.href = "03_detail.html?id=" + id; }) //使用Ajax获取商品数据
$.get("json/goods.json", function(responseData){
//console.log(responseData.data);
var arr = responseData.data;
myArr = arr; //遍历arr
for (var i=0; i<arr.length; i++){
var obj = arr[i]; //每个商品的数据 //创建li节点
var li = $("<li></li>").appendTo("#list");
$("<img src="+ obj.img +" />").appendTo(li); //图片
$("<p>"+ obj.name +"</p>").appendTo(li); //名称
$("<p>"+ obj.unit + obj.price +"</p>").appendTo(li); //价格
$("<a href='#'>加入购物车</a>").appendTo(li); //
}
}) //使用ajax获取商品数据方法2
// $.get("json/goods.json", function(data) {
// console.log(data);
// console.log(data.data);
// var arr = data.data;
//
// myArr = arr;
// var liHtml = "";
// for(var i=0; i<arr.length; i++){
// liHtml += `<li>
// <img src=${arr[i].img}/>
// <p>${arr[i].name}</p>
// <p>${arr[i].price}</p>
// <a href='#'>加入购物车</a>
// </li>`;
// $("#list").html(liHtml);
// } //加入购物车
$("#list").on("click", "a", function(e){
e.stopPropagation();
//console.log(11); var index = $(this).index("a");
//console.log(index); //当前要加入购物车的商品信息
var obj = myArr[index]; var arr = $.cookie("cart") ? JSON.parse($.cookie("cart")) : [];
var isExist = false;
for (var i=0; i<arr.length; i++){
if (arr[i].id == obj.id) {
arr[i].num++;
isExist = true;
}
}
if (!isExist) {
obj.num = 1;
obj.checked = true; //是否选中该商品
arr.push(obj);
} $.cookie("cart", JSON.stringify(arr), {expires:30, path:"/"});
console.log( $.cookie("cart") )
}) $("#gotoCart").click(function(){
location.href = "05_myCart.html";
}) })
</script>
</head>
<body>
<button id="gotoCart">结算</button>
<ul id="list">
<!--<li>
<img src="data:images/1.jpg" />
<p>单车</p>
<p>1000</p>
</li>
<li>
<img src="data:images/2.jpg" />
<p>摩托</p>
<p>10000</p>
</li>
<li>
<img src="data:images/b1.jpg" />
<p>汽车</p>
<p>100000</p>
</li>
<li>
<img src="data:images/b2.jpg" />
<p>飞机</p>
<p>1000000</p>
</li>-->
</ul>
</body>
</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); // //获取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="data: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="data: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>
jq-demo-购物车的更多相关文章
- jq demo 轮播图，图片可调用，向左，自动+鼠标点击切换
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
- jq demo 轮播图，图片可调用，向上，自动+鼠标点击切换
1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...
- JQ实现购物车全选跟总计全选
//GoodsCheck购物车每个店铺的checkBox//goods-check购物车所有的checkBox//ShopCheck店铺全选的按钮//commlistFrm店铺商品的模块//allCh ...
- jq demo 简单的图片懒加载效果
重点:在元素进入可视区域后,把图片元素的 _src 的值,赋值给 src <!DOCTYPE HTML> <html> <head> <meta http-e ...
- jq demo 点击弹窗，居中，可滚动，可拖动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jq demo 点击评分组件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jq demo 九宫格抽奖
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- jq demo 点击选中元素左右移动
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- jq demo—图片翻页展示效果 animate()动画
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- jq 简易购物车功能实现
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...
随机推荐
- Android Service完全解析(下)
转载http://blog.csdn.net/guolin_blog/article/details/9797169 在上一篇文章中,我们学习了Android Service相关的许多重要内容,包括S ...
- dns轮训python
环境 python3 先安装dnspython模块 httpclient模块 resolver模块 pip install dnspython pip install hhtpclient pip i ...
- Spark Core 1.3.1源码解析及个人总结
本篇源码基于赵星对Spark 1.3.1解析进行整理.话说,我不认为我这下文源码的排版很好,不能适应的还是看总结吧. 虽然1.3.1有点老了,但对于standalone模式下的Master.Worke ...
- 前端用vue，后端需要nodejs吗？
其实用脚趾头想想也知道:后端用不用node,和前端用不用vue,二者完全没关系. 那为何用vue和vue插件开发前端的时候,经常需要各种npm install呢?为何要在本地安装node环境? 本地需 ...
- Linux 任务管理器（二）
特殊文件与进程 fuser命令 [root@localhost home]# fuser -muv . 用户 进程号 权限 命令 /home: root kernel mount (root)/hom ...
- 前端学习(十九）jquery（笔记）
jquery:库,框架 js,别人封装成的js 官网:http://jquery.com/ -----------------------------------1.7 ----------jq 1. ...
- 简单API接口签名验证
前言 后端在写对外的API接口时,一般会对参数进行签名来保证接口的安全性,在设计签名算法的时候,主要考虑的是这几个问题: 1. 请求的来源是否合法 2. 请求参数是否被篡改 3. 请求的唯一性 我们的 ...
- SparkSQL(一)
一.概述 组件 运行机制 转 SparkSQL – 从0到1认识Catalyst https://blog.csdn.net/qq_36421826/article/details/81988157 ...
- magento结构解析
Magento 模块 模块( module )是 Magento 的核心.站点上的任何一个动作( action ),无论是在前台和还是在后台的每一个操作都是通过模块来实现的.模块是可以视为一个容器,它 ...
- 视觉里程计：2D-2D 对极几何、3D-2D PnP、3D-3D ICP
参考链接:https://mp.weixin.qq.com/s/89IHjqnw-JJ1Ak_YjWdHvA #include <iostream> #include <opencv ...