Showing and hiding buttons per ajax request in jquery

I've coded up a sort of inventory managing system and I'm adding a shipping cart so to speak to it. I'm trying to make the interface easier to use and navigate through jquery. The 'cart' is stored via开发者_如何学Python sessions in php. I have a page that outputs all the inventory and I am adding buttons that allow the user to add or remove each specific item from the 'cart', but only one button should be shown based on cart status (i.e. if the item is in cart, show the remove button).

Ive got a mess of jquery code as I'm trying all sorts of approaches

heres some 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";
                    }

here's some 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');
        }
    });  
});

Any suggestions as to how I should make this simpler? Ive got it working now.

first in 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';

now I present two method, the first one will execute slightly faster as it only switch classes in css, but you don't get your fancy effect. you get it in the second method.

first method add to your css:

.inactive {display: none;}

and in 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');
    });
});

Second method, no need for a CSS entry.

$(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');
        });
    }); 
});

hope this help. note: I didn't test the code, some nasty typo might have slipped through. Additionnal note, you might want some visual effect right before the ajax call (like in the comment in version 2, or hide $object, so that the user can't multiclick it.

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