技术标签 TAGS
专业技术精选
- 2020-03-20非常不错的骰子案例
- 2019-05-26vscode git and gitlens中文乱码问题
- 2011-12-14什么是网站制作的web标准
- 2011-12-14上海网站建设之六大不利优化因素
自己写,购物车对比的js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
#outWidth{ width:125px;}
.listProduct{ width:120px;}
.listProduct a{ display:block; }
.red{ color:#f00;}
#addCart{ position:absolute; top:12px; right:5px;}
</style>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
jQuery(function(){
$(".listProduct a").click(function(){
var addHtml = "";
//addHtml = $(this).html();
addHtml = $(this).attr("id");
if($(this).attr("class")==""){
$("#addCart").append("<div>" + addHtml + "</div>");
}
$(this).addClass("red");
});
$("#clearAll").click(function(){
$("#addCart>div").remove();
})
$("#butGetCartId").click(function(){
var msg = "";
var getCartAll = $(this).parent().find("div");
getCartAll.each(function(i){
if(i>0){
msg += (getCartAll.eq(i).html() + "<input type=checkbox name="+ getCartAll.eq(i).html() +">");
}
})
$("#getCartlist").html(msg);
})
})
</script>
<body>
<div id="productWrap">
<div class="listProduct">
<a href="#" id="1">product 02</a>
<a href="#" id="2">product 03</a>
<a href="#" id="3">product 04</a>
<a href="#" id="4">product 05</a>
<a href="#" id="5">product 06</a>
<a href="#" id="6">product 07</a>
<a href="#" id="7">product 08</a>
<a href="#" id="8">product 09</a>
</div>
<a href="#" id="clearAll">clear all</a>
</div>
<div id="addCart">
<div id="getCartlist"></div>
<input type="submit" value="Get it" id="butGetCartId">
</div>
</body>
</html>