购物车,该怎么解决
日期：2014-05-20 浏览次数：20842 次
购物车
<title>Shopping cart</title>
<link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
<style>
.remove{
margin-left:60px;
}
</style>
<script src="js/jquery-1.3.2.min.js"></script>
<script>
$(function(){
$("a[class!='remove']").click(function(){
//获取当前点击a标签对应的商品名称
var name=$(this).parent().find("h2").text();
//获取当前点击a标签对应的商品价格
var price=$(this).prev().find("span").text();
addproduct( name,price);
})
})
///添加商品
function addproduct(proname,price)
{
//判断当前订购的商品是否已经在购物车中
var pros=$("#cartProducts>div");
var flag=false;
//each：遍历集合
pros.each(function(){
if($(this).children().eq(0).text()==proname)
{
flag=true;
//获取原有数量
var num=$(this).find(".num").text();
$(this).find(".num").text(parseInt(num)+1);
}
})
/*for(var i=0;i<pros.length;i++)
{
if(pros.eq(i).children().eq(0).text()==proname)
{
flag=true;
//获取原有数量
var num=pros.eq(i).find(".num").text();
pros.eq(i).find(".num").text(parseInt(num)+1);
break;
}
}*/
if(!flag)
{
var html="<div><span>"+proname+"</span><br/>数量：<span class='num'>1</span><br/><span>"+price+"</span><a href='#' onclick='javascript:del(this)' class='remove'>remove</a></div>";
$("#cartProducts").append(html);
}
}
function del(obj)
{
$(obj).parent().remove();
}
</script>
</head>
<body>
<div id="cart" class="cart">
<h3>我的购物车</h3>
<div id="cartProducts"></div>
<p><strong>总价: <span id="cartTotal">0</span> ￥</strong></p>
</div>
<h1>可以直接拖动产品到购物车</h1>
<div id="products">
<div id="product1" class="product">
<img src="images/1.jpg" alt=""/>
<h2>Nike男式休闲鞋</h2>
<p>型号：40码</p>
<p><strong>单价: <span>499.35</span> ￥</strong></p>
<a href="#">添加到购物车</a>
</div>
<div id="product2" class="product">
<img src="images/2.jpg" />
<h2>Nike女式篮球鞋</h2>
<p>型号：37码</p>
<p><strong>单价: <span>325.95</span> ￥</strong></p>
<a href="#">添加到购物车</a>
</div>
<div id="product3" class="product">
<img src="images/3.jpg"/>
<h2>Nike男式篮球鞋</h2>
<p>型号：42码</p>
<p><strong>单价: <span>423.00</span> ￥</strong></p>
<a href="#">添加到购物车</a>
</div>
<div id="product4" class="product">
<img src="images/4.jpg"/>
<h2>波司登男式羽绒服</h2>
<p>型号：XXXL</p>
<p><strong>单价: <span>349.95</span> ￥</strong></p>
<a href="#">添加到购物车</a>
</div>
<div id="product5" class="product">
<img src="images/5.jpg"/>
<h2>波司登女式羽绒服</h2>
<p>型号：ML</p>
<title>Shopping cart</title>
<link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
<style>
.remove{
margin-left:60px;
}
</style>
<script src="js/jquery-1.3.2.min.js"></script>
<script>
$(function(){
$("a[class!='remove']").click(function(){
//获取当前点击a标签对应的商品名称
var name=$(this).parent().find("h2").text();
//获取当前点击a标签对应的商品价格
var price=$(this).prev().find("span").text();
addproduct( name,price);
})
})
///添加商品
function addproduct(proname,price)
{
//判断当前订购的商品是否已经在购物车中
var pros=$("#cartProducts>div");
var flag=false;
//each：遍历集合
pros.each(function(){
if($(this).children().eq(0).text()==proname)
{
flag=true;
//获取原有数量
var num=$(this).find(".num").text();
$(this).find(".num").text(parseInt(num)+1);
}
})
/*for(var i=0;i<pros.length;i++)
{
if(pros.eq(i).children().eq(0).text()==proname)
{
flag=true;
//获取原有数量
var num=pros.eq(i).find(".num").text();
pros.eq(i).find(".num").text(parseInt(num)+1);
break;
}
}*/
if(!flag)
{
var html="<div><span>"+proname+"</span><br/>数量：<span class='num'>1</span><br/><span>"+price+"</span><a href='#' onclick='javascript:del(this)' class='remove'>remove</a></div>";
$("#cartProducts").append(html);
}
}
function del(obj)
{
$(obj).parent().remove();
}
</script>
</head>
<body>
<div id="cart" class="cart">
<h3>我的购物车</h3>
<div id="cartProducts"></div>
<p><strong>总价: <span id="cartTotal">0</span> ￥</strong></p>
</div>
<h1>可以直接拖动产品到购物车</h1>
<div id="products">
<div id="product1" class="product">
<img src="images/1.jpg" alt=""/>
<h2>Nike男式休闲鞋</h2>
<p>型号：40码</p>
<p><strong>单价: <span>499.35</span> ￥</strong></p>
<a href="#">添加到购物车</a>
</div>
<div id="product2" class="product">
<img src="images/2.jpg" />
<h2>Nike女式篮球鞋</h2>
<p>型号：37码</p>
<p><strong>单价: <span>325.95</span> ￥</strong></p>
<a href="#">添加到购物车</a>
</div>
<div id="product3" class="product">
<img src="images/3.jpg"/>
<h2>Nike男式篮球鞋</h2>
<p>型号：42码</p>
<p><strong>单价: <span>423.00</span> ￥</strong></p>
<a href="#">添加到购物车</a>
</div>
<div id="product4" class="product">
<img src="images/4.jpg"/>
<h2>波司登男式羽绒服</h2>
<p>型号：XXXL</p>
<p><strong>单价: <span>349.95</span> ￥</strong></p>
<a href="#">添加到购物车</a>
</div>
<div id="product5" class="product">
<img src="images/5.jpg"/>
<h2>波司登女式羽绒服</h2>
<p>型号：ML</p>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
