<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>购物车</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
function Product(id,description){
this.getId = function(){
return id ;
} ;
this.getDescription = function(){
return description ;
} ;
}
function Cart(){
var items = [] ;
this.addItem = function(item){
items.push(item) ;
} ;
}
function init(){
var products = [new Product(1,"ipad"),new Product(2,"iphone"),new Product(3,"mac")] ,cart = new Cart();
// alert(Array.prototype.forEach)
//IE中对数据 forEach 要到IE9以后才支持 ，IE8不支持
products.forEach(function(product){
var newItem = $("<li></li>").html(product.getDescription()).attr("id",product.getId()).dblclick(addToCard).appendTo("#products");
}) ;
function addToCard(){
var productId = $(this).attr("id") ;
//$.grep 对数组过滤
var product = $.grep(products,function(x){
return x.getId() == productId ;
})[0] ; //加[0]转换为DOM对象
cart.addItem(product) ;
var newItem = $(‘<li></li>‘).html(product.getDescription()).attr("id-card",product.getId()).appendTo("#cart") ;
}
}
</script>
</head>
<body onload="init();">
<h2>购物车JS</h2><hr style="margin:0 auto;width:600px;">
产品：<div id="products"></div>
<br>
我的购物车:<div id="cart"></div>
</body>
</html>
JAVASCRIPT基础08-购物车（01）
时间： 2024-10-04 21:26:07