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重新加载结果列表。

第二个选项（看起来像您要尝试的选项）是将数据属性中每个帖子的类别添加到元素（以逗号分隔），并且当过滤器更改时，循环遍历每个帖子元素并检查类别是否存在，然后隐藏或显示每个post元素。

这两个选项之间的选择取决于您显示的项目数量以及是否使用分页。第二种选择是最简单的一种，但是使用分页时会给您带来麻烦，因为并非所有帖子都会一次加载。

Answer 2

$('.category-filter').on('change', function(){
    $('main article').hide();
  $.each($('.category-filter input[type="checkbox"]'), function(el){
    if ($(this).is(":checked")) {
            var categoryName = $(this).attr("name");
      $("article.category-"+categoryName).show();
    }
  });
});

Answer 3

这需要使用AJAX完成。创建此AJAX过滤器将需要几个步骤。

首先，如果您一次只能单击复选框，则需要确保所有人具有相同的名称属性值。因此，您应该将它们都称为name =“ category-checkbox”，而不是name =“ block”或name =“ classic”。

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

如何使用复选框创建帖子类别过滤器？

3 个答案: