在 jQuery 中切换 AJAX 响应

Question

因此，我调用以下 AJAX 函数，以便在按下相应按钮时拉取并显示特定的分类 posts：

<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; ?>)">

有什么方法可以切换显示的特定 post 吗？基本上，如果按下一个按钮，就会显示其对应的 posts。如果再次按下按钮，post 将被隐藏。如果按下一个按钮，然后按下另一个按钮，则两个类别 post 会同时显示，直到再次按下其中一个按钮。

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

Answer 1

有很多解决方案。在下面的示例中，您可以只使用元素的 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();
});

在 jQuery 中切换 AJAX 响应

Toggling an AJAX Response in jQuery

javascript

php

ajax

wordpress

jquery