【jquery实现添加到购物车】jquery实现添加到购物车相关操作

【www.bbyears.com--jquery】

默认情况下，购物车是隐藏不可见的，当用户点击添加到购物车按钮后，商品信息会添加到购物车，购物车会以按钮的形式出现在页面右下角，点击按钮则会展开购物车，显示购物车中的商品信息，同时也可以对购物车中的商品进行删除或者结算等操作。用户也可以暂时关闭购物车继续购物。
HTML结构
HTML结构主要包括两部分，第一部分是商品列表中的“添加到购物车”按钮，如下代码，我们使用data-*属性将商品的id，图片、名称、价格等信息一并带上。

第二部分是购物车，购物车部分包括触发购物车以及购物车统计部分 .cd-cart-trigger和购物车主体内容部分.cd-cart。

            0
            0
         
   
 
   
       
           

               
购物车

                已删除 恢复
           

            
           
               
                   
               
           
 
           
       
   



在div.body元素里的ul列表默认是空的，它是用来显示购物车的商品列表信息的，它的大致结构如下，它是由Javascript动态插入的。

 代码如下
   
       
• 
             
                 
             
   
             
                 

  商品名称

  
   
                  ￥3999.99
   
                 
                      删除
   
                     
                          件数
                         
                              x1
                         
                     
                 
             
         
   
     
  
  

  CSS部分在本文不展示了，大家可以下载源码中的css/style.css查看。
  Javascript
  本实例代码是基于jQuery，因此需要提前加载jQUery库文件。
  当用户点击按钮.add-button后，触发函数addProduct()，将商品信息插入到 .body > ul中。

   代码如下 function addProduct(proname,proid,price,proimg) {
      var quantity = $("#cd-product-"+proid).text();
      var select="",productAdded="";
      
      if(quantity==""){
          var select = "x1";
          var productAdded = $("

• "+proname+"

  ￥"+price+"删除件数"+select+"");
          cartList.prepend(productAdded);
      }else{
          quantity = parseInt(quantity);
          $("#cd-product-"+proid).html(quantity+1);
      }
  }
  

  在购物车中的操作，如删除商品、恢复商品以及更改商品件数会导致结算总金额变动，因此在函数updateCartCount()和updateCartTotal()中会实时触发相关变动。好了，具体的javascript代码请下载源码查看js/main.js。

  本文来源：http://www.bbyears.com/wangyezhizuo/108663.html