首頁猿問如何使用復選框制作帖子類別過濾器？

如何使用復選框制作帖子類別過濾器？

PHP

慕工程0101907 2021-06-10 15:44:27

在我的博客存檔頁面上，我嘗試使用復選框創建類別過濾器，以便訪問者可以按類別過濾帖子，而無需重新加載頁面。但是我遇到了如何隱藏未選中類別的項目的問題。我寫了一段代碼，但真的不知道如何從那里走得更遠。$('.category-filter input[type="checkbox"]').click(function() { if ($(this).is(":checked")) { var categoryName = $(this).attr("name"); if ($("article").hasClass('category' + categoryName)) {} $(this).toggle; } else if ($(this).is(":not(:checked)")) { }});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><aside class="category-filter"> <label class="filter-category"><input type="checkbox" value="7" name="block" class=" js-filter-checkbox" id="7">Block</label> <label class="filter-category"><input type="checkbox" value="16" name="classic" class=" js-filter-checkbox" id="16">Classic</label> <label class="filter-category"><input type="checkbox" value="22" name="edge-case-2" class=" js-filter-checkbox" id="22">Edge Case</label></aside><main> <article id="post-2131" class="post-2131 post type-post status-publish format-standard has-post-thumbnail sticky hentry category-geen-onderdeel-van-een-categorie"></article> <article id="post-1241" class="post-1241 post type-post status-publish format-standard sticky hentry category-classic category-uncategorized tag-sticky-2 tag-template"></article> <article id="post-1938" class="post-1938 post type-post status-publish format-standard hentry category-block"></article></main>我想隱藏沒有檢查任何類的文章。

查看完整描述

3 回答

神不在的星期二

TA貢獻1963條經驗獲得超6個贊

這需要使用 AJAX 來完成。創建這個 AJAX 過濾器需要幾個步驟。

首先，如果您希望一次只能單擊復選框，則需要確保您都具有相同的名稱屬性值。因此，您應該同時調用它們，而不是 name="block" 或 name="classic"，例如，name="category-checkbox"。

在您的functions.php 文件中，您需要將以下內容入隊：

function scripts() {

wp_localize_script ('scripts', 'js_variables', array ('js_home_url' =>

home_url(), 'ajaxURL' => admin_url( 'admin-ajax.php' ), ''));

}

add_action( 'wp_enqueue_scripts', 'scripts' );

在您的 javascript 文件中，您需要從復選框中收集數據。您可以使用以下方法執行此操作：

$('.filter-category').change(function() {

var catId = ($(this).val());

aJaxFilter(catId);

});

function aJaxFilter(formData) {

$.ajax({

url: js_variables.ajaxURL,

type:'GET',

data: {

'formData' : formData,

'action' : 'listFilteredProducts'

success:function(data){

$('main').html(data);

}

});

}

然后，您需要創建另一個文件，我將其命名為 ajax-function.php，并將其放在我的代碼段文件夾中。在那里，輸入以下代碼：

add_action('wp_ajax_listFilteredProducts', 'listFilteredProducts');

add_action('wp_ajax_nopriv_listFilteredProducts', 'listFilteredProducts');

function listFilteredProducts($wp_query) {

if(isset($_GET['formData'])) {

$cat_id = $_GET['formData'];

}

$args = array(

'post_type' => 'post',

'posts_per_page' => -1,

'cat' => $cat_id,

);

$multiple = get_posts($args);

foreach($multiple as $single) {

$ID = $single->ID;

// Put the code for how you want your article cards to look here.

}

wp_die();

}

反對回復 2021-06-19

桃花長相依

TA貢獻1860條經驗獲得超8個贊

我可以想到兩個選項來解決這個問題。第一種是在過濾器更改時使用 AJAX 重新加載結果列表。

第二個選項（看起來像您正在嘗試的那個）是將數據屬性中的每個帖子的類別添加到元素（逗號分隔），并且當過濾器更改時，循環遍歷每個帖子元素并檢查是否category 存在，然后隱藏或顯示每個帖子元素。

這兩個選項之間的選擇取決于您顯示的項目數量以及您是否使用分頁。第二個選項是最簡單的選項，但是當您使用分頁時，它會給您帶來麻煩，因為并非所有帖子都會一次加載。

反對回復 2021-06-19

3 回答
0 關注
142 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何使用復選框制作帖子類別過濾器？

如何使用復選框制作帖子類別過濾器？

3 回答

添加回答

如何使用復選框制作帖子類別過濾器？

如何使用復選框制作帖子類別過濾器？