2012-02-03 47 views
0

我有这个代码来实现一点点电子商务:添加到购物篮与jQuery和插入标签

$(document).ready(function(){ 

$("#basketItemsWrap li:first").hide(); 

$(".productPriceWrapRight a img").click(function() { 
    var productIDValSplitter = (this.id).split("_"); 
    var productIDVal   = productIDValSplitter[1]; 

    var productX  = $("#productImageWrapID_" + productIDVal).offset().left; 
    var productY  = $("#productImageWrapID_" + productIDVal).offset().top; 

    if($("#productID_" + productIDVal).length > 0){ 
     var basketX   = $("#productID_" + productIDVal).offset().left; 
     var basketY   = $("#productID_" + productIDVal).offset().top;   
    } else { 
     var basketX   = $("#basketTitleWrap").offset().left; 
     var basketY   = $("#basketTitleWrap").offset().top; 
    } 

    var gotoX   = basketX - productX; 
    var gotoY   = basketY - productY; 

    var newImageWidth = $("#productImageWrapID_" + productIDVal).width()/3; 
    var newImageHeight = $("#productImageWrapID_" + productIDVal).height()/3; 

    $("#productImageWrapID_" + productIDVal + " img") 
    .clone() 
    .prependTo("#productImageWrapID_" + productIDVal) 
    .css({'position' : 'absolute'}) 
    .animate({opacity: 0.4}, 100) 
    .animate({opacity: 0.1, marginLeft: gotoX, marginTop: gotoY, width: newImageWidth, height: newImageHeight}, 1200, function() { 
                                                                               $(this).remove(); 

     $("#notificationsLoader").html('<img src="images/loader.gif">'); 

     $.ajax({ 
      type: "POST", 
      url: "funzioni-carrello.asp", 
      data: { productID: productIDVal, action: "addToBasket"}, 
      success: function(theResponse) { 

       $("#empty").hide(); 

       if($("#productID_" + productIDVal).length > 0){ 
        $("#productID_" + productIDVal).animate({ opacity: 0 }, 500); 
        $("#productID_" + productIDVal).before(theResponse).remove(); 
        $("#productID_" + productIDVal).animate({ opacity: 0 }, 500); 
        $("#productID_" + productIDVal).animate({ opacity: 1 }, 500); 
        $("#notificationsLoader").empty(); 
       } else { 
        $("#basketItemsWrap li:first").before(theResponse); 
        $("#basketItemsWrap li:first").hide(); 
        $("#basketItemsWrap li:first").show("slow"); 
        $("#notificationsLoader").empty();   
       } 

      } 
     }); 

    }); 

}); 
$("#basketItemsWrap li img").live("click", function(event) { 
    if ($("#basketItemsWrap li").length == 1){ 
      $("#empty").show(); 
     } 
    var productIDValSplitter = (this.id).split("_"); 
    var productIDVal   = productIDValSplitter[1]; 

    $("#notificationsLoader").html('<img src="images/loader.gif">'); 

    $.ajax({ 
     type: "POST", 
     url: "funzioni-carrello.asp", 
     data: { productID: productIDVal, action: "deleteFromBasket"}, 
     success: function(theResponse) { 

      $("#productID_" + productIDVal).hide("slow", function() {$(this).remove();}); 
      $("#notificationsLoader").empty(); 

     } 
    }); 

}); 

});

和以后,我就函数调用是这样的:

  <div id="basketWrap"> 
      <div id="basketTitleWrap"> 
       <h2>Carrello </h2> 
      </div> 
      <div id="empty">Your basket is empty!</div> 
      <div id="basketItemsWrap"> 
       <ul> 
       <li></li> 
       <% 
       'dim getBasket 
       getBasket() %> 

       </ul> 
      </div> 
     </div> 

我想插入图片“结帐”链接另一页,当有至少1项。那可能吗?

回答

0
// JQuery 
if ($("#basketItemsWrap li").length > 0){ 
    // Reference to a hidden checkout link 
    $("#checkout").show(); 
} 
else{ 
    $("#checkout").hide();  
} 

<!-- HTML --> 
<a id="checkout" href="/my/checkout/page"> 
    <img alt="Checkout" src="/my/checkout/image" /> 
</a> 

/* CSS */ 
#checkout{ 
    visible: none; 
} 

您将检查在篮子要素的每次用户添加新项

+0

它不工作的数量(li元素)...显示标签结账时购物车是空 – Elisa 2012-02-03 17:09:02

+0

它不工作...任何人都可以帮助我?谢谢 – Elisa 2012-02-06 15:00:39