在 jQuery 中切换 AJAX 响应

Toggling an AJAX Response in jQuery

本文关键字：AJAX 响应 jQuery      更新时间：2023-09-26

所以我调用以下 AJAX 函数，以便在按下相应按钮时拉取和显示特定的分类帖子：

<script>    
// Brochure AJAX
    function term_ajax_get(termID) {
        jQuery("#loading-animation").show();
        var ajaxurl = 'http://localhost/kskj-portal/wp-admin/admin-ajax.php';
            jQuery.ajax({
                type: 'POST',
                url: ajaxurl,
                data: {"action": "load-filter2", term: termID },
                success: function(response) {
                    jQuery(".brochure-post-container").append(response);
                    jQuery("#loading-animation").hide();
                    return false;
                    }
            });
        }
</script>

使用 HTML 中的 onclick 属性调用该函数，以便动态更新函数的输入 （termID）：

<?php foreach ($products as $product):
    // setup the product/cateogory ID
    $product_name = $product->name;
    $product_id= $product->term_id;
    $product_slug = $product->slug;
    ?>

    <div class="product-container OFF" onclick="term_ajax_get(<?php echo $product->term_id; ?>)">

有没有办法切换正在显示的特定帖子？基本上，如果按下按钮，则会显示其相应的帖子。如果再次按下该按钮，帖子将被隐藏。如果按下一个按钮，然后按下另一个按钮，则两个类别帖子将同时显示，直到再次按下其中一个按钮。

现在，每次按下按钮时，它都会将该类别的帖子附加到页面上。我需要在按下时将类别放到页面上，但我不知道再次按下相应的按钮时如何删除它，或者在选择两个按钮时如何添加其他类别。

有很多解决方案。在下面的示例中，您可以只使用元素data属性，并根据需要，每次通过 ajax 加载新数据，或切换现有元素的可见性（以防止连接）。

将每个 ajax 响应放入一个唯一的元素中（在下面的示例中，每个元素都有其唯一的 data-term-id 属性），以便您以后可以轻松检查元素是否存在。

.PHP：

<div class="product-container OFF" data-term="<?php echo $product->term_id; ?>">blah</div>

Js 脚本：

function term_ajax_get(termID) 
{
    $("#loading-animation").show();
    $.ajax({
        type: 'POST',
        url: 'http://localhost/kskj-portal/wp-admin/admin-ajax.php',
        data: 
        {
            action: "load-filter2", 
            term: termID 
        },
        success: function(response) 
        {
            $(".brochure-post-container").append('<div data-term-id="'+termID+'">'+response+'</div>');
            return $("#loading-animation").hide();
        }
    });
}
$(".product-container").click(function()
{
    var termID = $(this).data("term");
    if(!$("[data-term-id='" + termID + "']").length)
    {
        return term_ajax_get(termID);
    }
    //OPTION 1.: TO PREVENT UNNECESSARY CONNECTIONS, SWITCH VISIBILITY OF THE ELEMENT IF ALREADY EXIST:
    $("[data-term-id='" + termID + "']").toggle();
    //OPTION 2.: USE IF YOU NEED TO SHOW FRESH DATA EACH TIME:
    //$("[data-term-id='" + termID + "']").remove();
});
相关文章：