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

Showing and hiding buttons per ajax request in jquery

本文关键字：ajax 请求 按钮 隐藏 jquery 显示      更新时间：2023-09-26

我已经编写了一种库存管理系统，我正在添加一个送货车，可以这么说。我试图使界面更容易使用，并通过jquery导航。"购物车"通过会话存储在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');
        }
    });  
});

有什么建议我应该使它更简单吗?

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

现在我给出两个方法，第一个将执行得稍微快一些，因为它只在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');
    });
相关文章：