3 回答

TA貢獻(xiàn)1963條經(jīng)驗(yàn) 獲得超6個(gè)贊
這需要使用 AJAX 來(lái)完成。創(chuàng)建這個(gè) AJAX 過(guò)濾器需要幾個(gè)步驟。
首先,如果您希望一次只能單擊復(fù)選框,則需要確保您都具有相同的名稱屬性值。因此,您應(yīng)該同時(shí)調(diào)用它們,而不是 name="block" 或 name="classic",例如,name="category-checkbox"。
在您的functions.php 文件中,您需要將以下內(nèi)容入隊(duì):
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 文件中,您需要從復(fù)選框中收集數(shù)據(jù)。您可以使用以下方法執(zhí)行此操作:
$('.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);
}
});
}
然后,您需要?jiǎng)?chuàng)建另一個(gè)文件,我將其命名為 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();
}

TA貢獻(xiàn)1860條經(jīng)驗(yàn) 獲得超8個(gè)贊
我可以想到兩個(gè)選項(xiàng)來(lái)解決這個(gè)問(wèn)題。第一種是在過(guò)濾器更改時(shí)使用 AJAX 重新加載結(jié)果列表。
第二個(gè)選項(xiàng)(看起來(lái)像您正在嘗試的那個(gè))是將數(shù)據(jù)屬性中的每個(gè)帖子的類別添加到元素(逗號(hào)分隔),并且當(dāng)過(guò)濾器更改時(shí),循環(huán)遍歷每個(gè)帖子元素并檢查是否category 存在,然后隱藏或顯示每個(gè)帖子元素。
這兩個(gè)選項(xiàng)之間的選擇取決于您顯示的項(xiàng)目數(shù)量以及您是否使用分頁(yè)。第二個(gè)選項(xiàng)是最簡(jiǎn)單的選項(xiàng),但是當(dāng)您使用分頁(yè)時(shí),它會(huì)給您帶來(lái)麻煩,因?yàn)椴⒎撬刑佣紩?huì)一次加載。
- 3 回答
- 0 關(guān)注
- 133 瀏覽
添加回答
舉報(bào)