标签：des style blog http java color
<!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）,布布扣,bubuko.com
标签：des style blog http java color
原文地址：http://www.cnblogs.com/liaokailin/p/3822934.html
