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>& ...
随机推荐
- LeetCode Array Easy 53. Maximum Subarray 个人解法 和分治思想的学习
Description Given an integer array nums, find the contiguous subarray (containing at least one numbe ...
- 【知识强化】第五章 输入/输出（I/O）管理 5.2 I/O核心子系统I
学习I/O核心子系统相关的一系列功能. 设备独立性软件.设备驱动程序.中断处理程序这三层其实是属于操作系统的内核部分的,所以它们也称作“I/O核心子系统”,又可以简称为“I/O系统”.在考研当中我们需 ...
- python字典拼接方法
python的dict拼接有多种方法,其中一种很好用而且速度非常快: x = {**a, **b} 效果等价于: x = a.copy() x.update(b) 注意update()是没有返回值的 ...
- cboard进行访问，汉化
- centos 6.5 修改主机名
使用 root 账号登录,编辑 vi /etc/sysconfig/network 此时的主机名如下 HOSTNAME=localhost.localdomain 修改 HOSTNAME=newnam ...
- hbase-2.0.4集群部署
hbase-2.0.4集群部署 1. 集群节点规划: rzx1 HMaster,HRegionServer rzx2 HRegionServer rzx3 HRegionServer 前提:搭建好ha ...
- 云原生数据库崛起，阿里云POLARDB当选世界互联网领先科技成果！
第六届世界互联网大会来了!千年水乡古镇乌镇又一次吸引了全世界的目光. 刚刚,阿里云自研数据库POLARDB在会上当选世界互联网领先科技成果.POLARDB解决了企业在云时代的数据库难题,帮助企业在数小 ...
- delphi动态创建控件
动态创建控件 其实动态创建控件很简单,相信看过本文后你会全明白的. 1 先在单元的initialization 部分注册它,(这样在单元使用时会自动注册的)如: RegisterClass( TBut ...
- 工具类--map 转成xml xml转成map
public class WxChatReq { /** * Map转换成XML * @param data * @return * @throws Exception */ public stati ...
- 关于ios 的耳机线线控
如题 线控主要就是指的用ios耳机的 中间那个键来自定义一些程序自己的事件(比如玩吃鸡的时候,作为开枪扳机) 而想要控制耳机的音量加减的事件, 有一种方法,就是监听 系统音量的变化,根据音量变化来触 ...