顯示和隱藏每個Ajax請求按鈕的jQuery

Question

我已經編寫了一種庫存管理系統的，我加入了航運車所以它說話。我試圖讓界面更易於使用，並通過jQuery進行導航。 '購物車'通過會話存儲在PHP中。我有一個輸出所有庫存的頁面，我添加了允許用戶從「購物車」中添加或刪除每個特定物品的按鈕，但只有一個按鈕應基於購物車狀態顯示（例如，如果物品在購物車中，顯示刪除按鈕）。

Ive得到的jQuery代碼亂七八糟，因爲我嘗試各種方法

繼承人一些PHP：

    if(isset($_SESSION['cart'][$row['bbn']])) { 
         echo "<a href=\"#\" class=\"active removefromcart\">REMOVE FROM CART</a>\n"; 
         echo "<a href=\"#\" class=\"addtocart\">ADD TO CART</a>\n"; 
        } else { 
         echo "<a href=\"#\" class=\"active addtocart\">ADD TO CART</a>\n"; 
         echo "<a href=\"#\" class=\"removefromcart\">REMOVE FROM CART</a>\n"; 
        } 

這裏的一些jQuery的：

$(".addtocart").each(function (i) { 
    if($(this).hasClass('active')){ 
     $(this).siblings('.removefromcart').hide(); 
    } 
}); 

$(".removefromcart").each(function (i) { 
    if($(this).hasClass('active')){ 
     $(this).siblings('.addtocart').hide(); 
    } 
}); 

// View_inventory add button 
$(".addtocart").click(function(){ 
    var $bbn = $(this).parent().attr("id"); 
    var $object = this; 
    $.ajax({ 
     url: "queue.php?action=add", 
     data: { bbn: $bbn }, 
     type: 'GET', 
     success: function(){ 
      $($object).hide(); 
      $($object).siblings('.removefromcart').show('highlight'); 
     } 
    }); 
}); 

$(".removefromcart").click(function(){ 
    var $bbn = $(this).parent().attr("id"); 
    var $object = this; 
    $.ajax({ 
     url: "queue.php?action=remove", 
     data: { bbn: $bbn }, 
     type: 'GET', 
     success: function(){ 
      $($object).hide(); 
      $($object).siblings('.addtocart').show('highlight'); 
     } 
    }); 
}); 

任何建議，我應該如何簡化這個過程？我現在開始工作了。

Answer 1

先在PHP中：

$cart = ''; 
$noCart = ''; 

if (! isset($_SESSION['cart'][$row['bbn']])) $cart = 'inactive'; 
else $noCart = 'inactive'; 

echo '<a href="#" class="'.$cart.' removefromcart">REMOVE FROM CART</a>\n'; 
echo '<a href="#" class="'.$noCart.' addtocart">ADD TO CART</a>\n'; 

現在我提出了兩種方法，第一個會稍微快一些，因爲它只有在CSS交換機類執行，但你沒有得到你的想象效果。你用第二種方法得到它。

第一種方法 添加到您的CSS：

.inactive {display: none;} 

和JS：

$(".addtocart, .removefromcart").click(function(){ 
    var $object = $(this); 
    var bbn = $object.parent().attr("id"); 
    var action = $object.find('.addtocart').length ? 'add' : 'remove'; 
    $.get("queue.php", {"action": action, "bbn": bbn}, function (data) { 
     $object.addClass('inactive').siblings().removeClass('inactive'); 
    }); 
}); 

方法二，無需使用CSS條目。

$(function() { // equivalent to $(document).ready(function() { 

    $('.inactive').hide(); 

    $(".addtocart, removefromcart").click(function(){ 
     var $object = $(this); 
     var bbn = $object.parent().attr("id"); 
     var action = $object.find('.addtocart').length ? 'add' : 'remove'; 
     var params = {action: action, bbn: bbn}; 
     // $('#someSpinnigLoadingImage').show(); 
     $.get("queue.php", params, function (data) { 
      // $('#someSpinnigLoadingImage').hide(); 
      $object.hide().siblings().show('highlight'); 
     }); 
    }); 
}); 

希望得到這個幫助。注意：我沒有測試代碼，有些討厭的錯字可能已經溜走了。 其它附加註釋，您可能需要一些視覺效果右邊的AJAX調用之前（如在第2版，或隱藏$對象的意見，從而使用戶無法multiclick它。

$object.hide() 
    $.get("queue.php", params, function (data) { 
     $object.siblings().show('highlight'); 
    });