Как добавить фильтр по годам и месяцам вместе, используя выпадающий список на сайте блога stati c?

Question

Я работаю над одним веб-сайтом статьи c, где я хочу добавить функцию «фильтрация по году и месяцу», чтобы пользователь мог легко фильтровать статьи блога в соответствии со своими потребностями.

Я уже включил функцию «фильтр по месяцам», но тогда я не знаю, что делать, если кто-то хочет посмотреть статью в блоге определенного c месяца определенного года c, скажем, декабрь 2019 только. В таком случае мне нужна помощь.

$(function() {
  $('#monthselectore').change(function() {
    if ($(this).val() == "All") {
      $('.filterDiv').show();
      return;
    } else {
      $('.filterDiv').hide();
    }
    $('.' + $(this).val()).show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row text-center">
    <div class="col-md-4"></div>
    <div class="col-md-4">
      <h2 class="filterTitle">Filter by month</h2>
      <select class="form-control" id="monthselectore">
        <option value="All">All</option>
        <option value="jan">Jan</option>
        <option value="feb">Feb</option>
        <option value="mar">Mar</option>
        <option value="apr">Apr</option>
        <option value="may">May</option>
        <option value="jun">Jun</option>
        <option value="jul">Jul</option>
        <option value="aug">Aug</option>
        <option value="sep">Sep</option>
        <option value="oct">Oct</option>
        <option value="nov">Nov</option>
        <option value="dec">Dec</option>
      </select>
    </div>
    <div class="col-md-4"></div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv jan"></div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv feb"></div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv mar"></div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv apr"></div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv may"></div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv jun"></div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv jul"></div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv aug"></div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv sep"></div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv oct"></div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv nov"></div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv dec"></div>
  </div>
</div>

Answer 1

Чтобы сделать это для нескольких фильтров, вы можете использовать шаблон, аналогичный тому, который вы уже создали, ie. используя значение выбранного option в качестве class для фильтрации элементов по. Чтобы добавить годы к этому, вы можете получить значение, кратное select, и объединить их вместе ., чтобы создать строку селектора, которую вы можете использовать для отображения / скрытия соответствующих элементов. Попробуйте это:

$(function() {
  var $divs = $('.filterDiv');

  $('.filter').change(function() {
    var filterSelector = $('.filter').map((i, el) => el.value ? el.value : null).get().join('.');
    $divs.hide();
    if (filterSelector) {
      $('.' + filterSelector).show();
    } else {
      $('.filterDiv').show();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row text-center">
    <div class="col-md-4"></div>
    <div class="col-md-4">
      <h2 class="filterTitle">Filter by month</h2>
      <select class="form-control filter" id="monthselectore">
        <option value="">All months</option>
        <option value="jan">Jan</option>
        <option value="feb">Feb</option>
        <option value="mar">Mar</option>
        <option value="apr">Apr</option>
        <option value="may">May</option>
        <option value="jun">Jun</option>
        <option value="jul">Jul</option>
        <option value="aug">Aug</option>
        <option value="sep">Sep</option>
        <option value="oct">Oct</option>
        <option value="nov">Nov</option>
        <option value="dec">Dec</option>
      </select>
      <select class="form-control filter" id="monthselectore">
        <option value="">All years</option>
        <option value="2018">2018</option>
        <option value="2019">2019</option>
      </select>
    </div>
    <div class="col-md-4"></div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv jan 2018">Jan 18</div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv feb 2018">Feb 18</div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv mar 2018">Mar 18</div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv apr 2018">Apr 18</div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv may 2018">May 18</div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv jun 2018">Jun 18</div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv jul 2018">Jul 18</div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv aug 2018">Aug 18</div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv sep 2018">Sep 18</div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv oct 2018">Oct 18</div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv nov 2018">Nov 18</div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv dec 2018">Dec 18</div>
  </div>
  <div class="row">
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv jan 2019">Jan 19</div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv feb 2019">Feb 19</div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv mar 2019">Mar 19</div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv apr 2019">Apr 19</div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv may 2019">May 19</div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv jun 2019">Jun 19</div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv jul 2019">Jul 19</div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv aug 2019">Aug 19</div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv sep 2019">Sep 19</div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv oct 2019">Oct 19</div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv nov 2019">Nov 19</div>
    <div class="col-md-4 simpleCart_shelfItem product-item media_outer filterDiv dec 2019">Dec 19</div>
  </div>
</div>