商品展示案例，添加到购物车
1、自己声明商品对象集合：从后台查询得到
2、把商品对象集合的数据 以 dl-dt-dd形式动态展示
3、商品详情 加入购物车
思路:
-
1、加入购物车思路：
声明购物车对象：Car
创建购物车数组：aryCar
点击 加入购物车 按钮- 1)、到商品数组中找到购买的商品
- 2)、创建Car对象的实例，然后赋值
- 3)、加入购物车数组中
-
2、查看购物车功能
显示aryCar里面的数据
以下为代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品展示</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
font-size: 14px;
}
#box{
width: 1000px;
height: 1500px;
margin: 0 auto;
/*background-color: paleturquoise;*/
}
.imgsize{
width: 200px;
height: 200px;
display: block;
}
dl{
width: 200px;
height: 240px;
padding: 20px;
border: 1px solid gray;
margin-left: 30px;
margin-bottom: 30px;
float: left;
}
/*显示商品详情DIV的样式*/
#showdetail{
position: fixed;
top: 200px;
left: 350px;
width: 450px;
height: 350px;
padding-left: 200px;
padding-top: 150px;
border: 1px solid darkblue;
background-color: papayawhip;
display: none;
}
#cardiv{
position: fixed;
top: 100px;
left: 250px;
width: 650px;
height: 300px;
background-color: papayawhip;
border: 1px solid darkcyan;
/*隐藏*/
display: none;
/*margin-bottom: 100px;*/
}
#tCar{
width: 650px;
border-collapse: collapse;
}
#tCar td{
border:1px solid black;
text-align: center;
}
.carImg{
width: 150px;
height: 35px;
}
.carNum{
width: 60px;
}
</style>
<script src="js/jquery-2.1.1.js"></script>
<script>
//自行构造JSON对象数组/集合
//var aryGoods=new Array();
//声明JSON对象有两种方式：
//方式1：new 对象方式
//声明商品对象
function Goods(gno,gname,price,num,img){
//声明对象的属性
this.gno=gno;
this.gname=gname;
this.price=price;
this.num=num;
this.img=img;
}
var aryGoods=new Array();
aryGoods[0]=new Goods("1001","可口可乐",3.0,500,"01.jpg");
aryGoods[1]=new Goods("1002","百世",3.0,500,"02.jpg");
aryGoods[2]=new Goods("1003","乐事薯片",8.0,500,"03.jpg");
aryGoods[3]=new Goods("1004","联想笔记本",5000.0,100,"04.jpg");
aryGoods[4]=new Goods("1005","鼠标",30.0,500,"05.jpg");
aryGoods[5]=new Goods("1006","可口可乐",3.0,500,"01.jpg");
aryGoods[6]=new Goods("1007","可口可乐",3.0,500,"01.jpg");
//声明一个存放购物商品的购物车的数组
var aryCar=new Array();
//声明购物车对象
function Car(no,name,img,buyNum,price){
this.no=no;
this.name=name;
this.img=img;
this.buyNum=buyNum;
this.price=price;
this.totalPrice=this.price*this.buyNum;
}
function initData(){
//把集合中的数据动态展示
//获取box
var div=$("#box");
//遍历商品集合数组
for(var i=0; i<aryGoods.length; i++){
var temp=aryGoods[i];
//创建dl-dt-dd
var dl=$("<dl></dl>");
div.append(dl);
var dt=$("<dt></dt>");
dl.append(dt);
var img=$("<img src='img/"+temp.img+"'/>");
img.addClass("imgsize");
dt.append(img);
var dd=$("<dd></dd>");
dl.append(dd);
dd.text("商品名称："+temp.gname+" 单价："+temp.price);
var br=$("<br/>");
dd.append(br);
//创建 查看详情 按钮
var detail=$("<a href='#'>查看详情</a>");
//鼠标单击事件 解决闭包问题
(function(index){
var t=aryGoods[index];
detail.click(function(){
//获取、显示出来
var show=$("#showdetail");
//每次获取后，清除里面的内容
show.text("");
//显示
show.css("display","block");
var img2=$("<img src='img/"+t.img+"'/>");
img2.addClass("imgsize");
show.append(img2);
show.append("商品名称："+t.gname);
var br2=$("<br />");
show.append(br2);
show.append("单价："+t.price);
var br3=$("<br/>");
show.append(br3);
show.append("库存："+t.num);
})
})(i);
dd.append(detail);
//创建 加入购物车 按钮
var car=$("<input type='button' id='buy'/>");
car.val("加入购物车");
//鼠标单击事件 解决闭包
(function(index){
//找到了要购买的商品
var g=aryGoods[index];
car.click(function(){
//1、获取到购买对象
var c=new Car();
//2、创建购物车对象，并且赋值
c.no=g.gno;
c.name=g.gname;
c.img=g.img;
c.price=g.price;
//购物数量默认为1
c.buyNum=1;
//3、赋值后的购物车对象加入购物车数组中
//判断当前加入购物车的商品在购物车中是否存在，如果存在，找到：数量+1
var flag=false;
for(var i=0; i<aryCar.length; i++){
if(c.no==aryCar[i].no){
flag=true;
aryCar[i].buyNum=aryCar[i].buyNum+1;
}
}
if(flag==false){
aryCar.push(c);
}
alert("购物车中商品数量是："+aryCar.length);
});
})(i);
dd.append(car);
}
}
//页面加载结束之后调用
$(function(){
initData();
});
//双击隐藏
function myClose(div){
var jQueryObj=$(div);
jQueryObj.css("display","none");
}
//显示购物车
function showCar(){
//先显示购物车DIV
var carDiv=$("#cardiv");
//清空购物车中之前的数据
carDiv.text("");
carDiv.css("display","block");
//显示购物车数据内容
//动态创建table
var table=$("<table id='tCar'></table>");
carDiv.append(table);
//创建购物车标题行
var trHead=$("<tr><td>序号</td><td>名称</td><td>图片</td><td>数量</td><td>单价</td><td>总价</td></tr>");
table.append(trHead);
//循环遍历购物车数组
for(var i=0; i<aryCar.length; i++){
//第一列 : 序号
var tr=$("<tr><td>"+(i+1)+"</td></tr>");
table.append(tr);
//第二列 : 商品名列
var td2=$("<td></td>");
td2.text(aryCar[i].name);
tr.append(td2);
//第三列 : 图片列
var carimg=$("<img class='carImg' src='img/"+aryCar[i].img+"'/>");
var td3=$("<td></td>");
td3.append(carimg);
tr.append(td3);
//第四列 : 数量列
var td4=$("<td></td>");
var btnSub=$("<input type='button' value='-' />");
var txtNum=$("<input type='text' class='carNum' />");
txtNum.val(aryCar[i].buyNum);
var btnAdd=$("<input type='button' value='+' />");
//添加单击事件 加数量
btnAdd.click(function(){
//this 代表当前点击的按钮
//this.previousSibling 加号按钮的上一个兄弟节点
var jText=$(this.previousSibling);
var newNum=parseInt(jText.val())+1;
jText.val(newNum);
//总价要有变化
//总价= newNum*单价
//如何获取单价
var tdPrice=$(this.parentNode.nextSibling).text();
var totlp=newNum*tdPrice;
this.parentNode.nextSibling.nextSibling.innerHTML=totlp;
});
//减数量
btnSub.click(function(){
var j=$(this.nextElementSibling);
var newNum=parseInt(j.val())-1;
j.val(newNum);
//总价要有变化
//总价= newNum*单价
//如何获取单价
var tdPrice=$(this.parentNode.nextSibling).text();
var totlp=newNum*tdPrice;
this.parentNode.nextSibling.nextSibling.innerHTML=totlp;
});
td4.append(btnSub);
td4.append(txtNum);
td4.append(btnAdd);
tr.append(td4);
//单价
var td5=$("<td></td>");
td5.text(aryCar[i].price);
tr.append(td5);
//总价：
var td6=$("<td></td>");
td6.text(aryCar[i].price*aryCar[i].buyNum);
tr.append(td6);
}
}
</script>
</head>
<body>
<div id="box">
<input type="button" value="查看购物车" onclick="showCar()" />
</div>
<div id="showdetail" title="双击关闭" ondblclick="myClose(this)">
</div>
<div id="cardiv" title="双击关闭" ondblclick="myClose(this)">
</div>
</body>
</html>
成果图:
5493
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
