添加到購物籃與jquery

Question

我使用這個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) { 

       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) { 
    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="basketItemsWrap"> 
    <ul> 
    <li></li> 
    <% 
     'dim getBasket 
     getBasket() %> 
    </ul> 
    </div> 
</div> 

我怎麼能修改此所以，如果籃子是空則顯示一條消息說這將消失，當你添加「您的購物籃是空的。」

<div id="basketWrap"> 
<div id="empty">Your basket is empty!</div> 
<ul id="itemlist"> 
    ... 

當你iteml：第一個產品，如果您刪除從你的籃子所有產品

Answer 1

開始拿出來與大家空籃子，這樣的事情，並會重新出現ist是空的，則將display:none;應用於#itemlist，如果其填充display:none;爲#empty div，display:block;爲#itemlist。

當您使用類似class="hidden"的東西時，您只需切換類即可。

另外，您可以通過.html()來操縱籃子的innerhtml。

編輯：

與上面給出的標記，添加到您的函數：

$("#basketItemsWrap li img").live("click", function(event) { 

下面的代碼：

if ($("#basketItemsWrap li").length == 1){ 
     $("#empty").show(); 
    } 

（你可以使用一些過渡，太）

對於您成功的部分，您添加了添加產品函數的ajax調用：

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