JAVASCRIPT基础08-购物车（01）

浏览数：16 / 时间：2015年06月08日

<!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>