Как сделать фильтр категорий сообщений с флажками?

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

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

Я могу придумать два варианта решения этой проблемы.Первый - использовать AJAX для перезагрузки списка результатов при изменении фильтра.

Второй вариант (который выглядит как тот, который вы пытаетесь) - добавить категории каждого сообщения в данные.Присвойте атрибут элементу (через запятую), и, когда фильтр изменится, переберите каждый элемент записи и проверьте, присутствует ли категория, а затем спрячьте или покажите каждый элемент записи.

Выбор между этими двумя параметрами зависит отколичество предметов, которые вы показываете, и если вы используете нумерацию страниц.Второй вариант - самый простой, но он создает проблемы при использовании нумерации страниц, поскольку не все сообщения загружаются одновременно.