如何使用复选框制作帖子类别过滤器？

Question

在我的博客存档页面上，我尝试使用复选框创建类别过滤器，以便访问者可以按类别过滤帖子，而无需重新加载页面。但是我遇到了如何隐藏未选中类别的项目的问题。

我写了一段代码，但真的不知道如何从那里走得更远。

$('.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>

我想隐藏没有检查任何类的文章。

Answer 1

这需要使用 AJAX 来完成。创建这个 AJAX 过滤器需要几个步骤。首先，如果您希望一次只能单击复选框，则需要确保您都具有相同的名称属性值。因此，您应该同时调用它们，而不是 name="block" 或 name="classic"，例如，name="category-checkbox"。在您的functions.php 文件中，您需要将以下内容入队：function scripts() {&nbsp; &nbsp; &nbsp;wp_localize_script ('scripts', 'js_variables', array ('js_home_url' =>&nbsp;&nbsp; &nbsp; &nbsp;home_url(), 'ajaxURL' => admin_url( 'admin-ajax.php' ), ''));}add_action( 'wp_enqueue_scripts', 'scripts' );在您的 javascript 文件中，您需要从复选框中收集数据。您可以使用以下方法执行此操作：$('.filter-category').change(function() {&nbsp; var catId = ($(this).val());&nbsp; aJaxFilter(catId);});function aJaxFilter(formData) {&nbsp; $.ajax({&nbsp; &nbsp; url: js_variables.ajaxURL,&nbsp; &nbsp; type:'GET',&nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; 'formData' : formData,&nbsp; &nbsp; &nbsp; 'action' : 'listFilteredProducts'&nbsp; &nbsp; },&nbsp; &nbsp; success:function(data){&nbsp; &nbsp; &nbsp; $('main').html(data);&nbsp; &nbsp; }&nbsp; });}然后，您需要创建另一个文件，我将其命名为 ajax-function.php，并将其放在我的代码段文件夹中。在那里，输入以下代码：add_action('wp_ajax_listFilteredProducts', 'listFilteredProducts');add_action('wp_ajax_nopriv_listFilteredProducts', 'listFilteredProducts');function listFilteredProducts($wp_query) {&nbsp; if(isset($_GET['formData'])) {&nbsp; &nbsp; $cat_id = $_GET['formData'];&nbsp; }&nbsp; $args = array(&nbsp; 'post_type' => 'post',&nbsp; 'posts_per_page' => -1,&nbsp; 'cat' => $cat_id,&nbsp; );&nbsp; $multiple = get_posts($args);&nbsp; foreach($multiple as $single) {&nbsp; $ID = $single->ID;&nbsp; &nbsp;// Put the code for how you want your article cards to look here.&nbsp; }&nbsp; wp_die();}

Answer 2

我可以想到两个选项来解决这个问题。第一种是在过滤器更改时使用 AJAX 重新加载结果列表。第二个选项（看起来像您正在尝试的那个）是将数据属性中的每个帖子的类别添加到元素（逗号分隔），并且当过滤器更改时，循环遍历每个帖子元素并检查是否category 存在，然后隐藏或显示每个帖子元素。这两个选项之间的选择取决于您显示的项目数量以及您是否使用分页。第二个选项是最简单的选项，但是当您使用分页时，它会给您带来麻烦，因为并非所有帖子都会一次加载。