Question

所以我呼吁，为了拉动和显示特定类别的帖子下面的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> 

函数被调用时使用显示

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

有没有一种方法，我可以切换的具体职位：以更新函数的输入（termID）动态HTML中的onclick属性？基本上，如果按下按钮，则显示其相应的帖子。如果再次按下该按钮，则帖子被隐藏。如果按下一个按钮，然后按下另一个按钮，则同时显示两个类别的帖子，直到再次按下其中一个按钮。

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

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