Question

我编写了一种库存管理系统，我正在添加一个装运车，以便与之对话。我正在尝试使界面更易于使用并浏览jquery。 'cart'通过php中的会话存储。我有一个输出所有库存的页面，我添加了允许用户在“购物车”中添加或删除每个特定商品的按钮，但是根据购物车状态只显示一个按钮（即如果商品在购物车中，显示删除按钮）。

因为我正在尝试各种方法，所以我得到了一堆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中的注释中，或隐藏$ object，以便用户无法多次点击它。

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

在jquery中显示和隐藏每个ajax请求的按钮

1 个答案: