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