Javascript 在jQuery中切换AJAX响应

因此，我调用以下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>

//小册子AJAX
函数项\u ajax\u get（termID）{
jQuery（“#加载动画”）.show（）；
var ajaxurl=http://localhost/kskj-portal/wp-admin/admin-ajax.php';
jQuery.ajax({
键入：“POST”，
url:ajaxurl，
数据：{“操作”：“load-filter2”，术语：termID}，
成功：功能（响应）{
jQuery（“.problem post container”）.append（响应）；
jQuery（“#加载动画”）.hide（）；
返回false；
}
});
}

在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响应放在一个唯一的元素中（在下面的示例中，每个元素都有其唯一的
数据项id
属性），以便以后可以轻松地检查元素的存在

PHP:

这有点宽泛，所以我在这里有点笼统。。。为了让同一个按钮执行这两个操作，您需要在执行操作之前检查单击处理程序中的某种条件。在您的情况下，条件是“页面上已经有内容了吗？”通过查找某个预期元素来检测，该元素只有在上一次按钮单击返回时才会出现。如果该内容存在，请将其删除。如果不是，则获取并插入它。（您还可以通过检测内容是否隐藏并显示/隐藏它来进一步改进，因此只获取一次。）感谢您的回复，我将尝试一下！Christopher Lis，让我知道这是否对你有效这非常有效，非常感谢你的帮助，我非常感谢！
<div class="product-container OFF" data-term="<?php echo $product->term_id; ?>">blah</div>

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