Блог

Главная - Вопросы по программированию - jQuery сортирует результаты фильтров выпадающего списка и флажков

jQuery сортирует результаты фильтров выпадающего списка и флажков

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

У меня есть список элементов, которые должны быть отсортированы по тегу и по стране. У меня есть список флажков для тегов и форма с выпадающим списком для страны.

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

Вот что у меня есть до сих пор: — скрипка

 $(".filter-options :checkbox").click(function() 
    {
        $(".card-col .card-col-item").hide();
        $(".filter-options :checkbox:checked").each(function() 
        {
           $("."   $(this).val()).fadeIn();
        });
       
        if($('.filter-options :checkbox').filter(':checked').length < 1) 
        {
             $(".card-col .card-col-item").fadeIn();
        }
});


$( ".event-type-select" ).change(function() {
  var selectedEventType = this.options[this.selectedIndex].value;
  if (selectedEventType == "all") {
    $(".card-col .card-col-item").show(function(){$(this).removeClass( "country" );});
      } else {
        $(".filter-options :checkbox").removeAttr("checked");
        $(".card-col .card-col-item").hide(function(){$(this).removeClass( "country" );});
        $('.card-col .card-col-item[data-eventtype="'   selectedEventType   '"]').show(function(){$(this).addClass( "country" );});
  }
});
     

$(".reset-filter").click(function() 
    {
    $(".filter-options :checkbox").removeAttr("checked");
            $(".card-col .card-col-item").show(function(){$(this).removeClass( "country" );});
    });

HTML:

 
<div class="filter-wrapper">
        <h3>Filter Items</h3>
        <button class="reset-filter">
          reset
        </button>
          <ul class="filter-options">
             
            <li class="filter-list"><div><input type="checkbox" value="tag1" data-filter_id="tag1"> Our Solutions</div></li>
            
            <li class="filter-list"><div><input type="checkbox" value="tag2" data-filter_id="tag2"> Service categories</div></li>
            
          </ul>

        <div>
          Country / Region
        </div>

        <form class="filter-dropdown">
          <select class="event-type-select">
            
            <option value="all">All</option>
            
            <option value="belgium">Belgium</option>
            
            <option value="united kingdom">United Kingdom</option>
            
          </select>
         </form>
      </div>

<div class="card-wrapper">
        <div class="card-col">
        

        <div class="card-col-item item-border 
                     tag1
                " data-eventtype="belgium">
          <div class="card-item-img " style="background-image:url('https://f.hubspotusercontent20.net/hubfs/7788778/Card Images/pexels-photo-209251.jpeg');">
            
          </div>
          <div class="card-inner-col ">
            <div class="card-tags">
                
              
                     our solutions
                
            </div>
            <div class="card-item-title">
              <h4 class="PrimaryDarkBlue">
                Lorem Ipsum Dolor
              </h4>
              
            </div>
          </div>
        </div>
        
 <div class="card-col-item item-border 
                     tag2
                " data-eventtype="belgium">
          <div class="card-item-img " style="background-image:url('https://f.hubspotusercontent20.net/hubfs/7788778/Card Images/pexels-photo-209251.jpeg');">
            
          </div>
          <div class="card-inner-col ">
            <div class="card-tags">
                
              
                     our solutions
                
            </div>
            <div class="card-item-title">
              <h4 class="PrimaryDarkBlue">
                Lorem Ipsum Dolor
              </h4>
              
            </div>
          </div>
        </div>

 <div class="card-col-item item-border 
                     tag3
                " data-eventtype="belgium">
          <div class="card-item-img " style="background-image:url('https://f.hubspotusercontent20.net/hubfs/7788778/Card Images/pexels-photo-209251.jpeg');">
            
          </div>
          <div class="card-inner-col ">
            <div class="card-tags">
                
              
                     our solutions
                
            </div>
            <div class="card-item-title">
              <h4 class="PrimaryDarkBlue">
                Lorem Ipsum Dolor
              </h4>
              
            </div>
          </div>
        </div>

  </div>
</div>

Ответ №1:

Объедините их в один change обработчик событий.

Для тегов я создаю массив значений с установленными флажками, а Array#some() также для переменной tagsMatch и другой переменной countryMatch внутри jQuery filter() и возвращаю выражение, оба из которых являются истинными

 const $checks = $(".filter-options :checkbox"),
$sel = $('.event-type-select'),
$items = $('.card-col-item')


$checks.add($sel).change(function(){
    const tagsArr = $checks.filter(':checked').map((i, el)=> el.value).get(),
          country = $sel.val();
    // hide all items then filter the ones to show
    $items.hide().filter(function(){
         const $item = $(this),
                eType = $item.data('eventtype'),
                tagsMatch = !tagsArr.length  || tagsArr.some(tag => $item.hasClass(tag)),
                countryMatch = country === 'all' || country === eType;
         
         return tagsMatch amp;amp; countryMatch;
    }).show()

}) 
 .card-item-img{height:40px} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter-wrapper">
  <h3>Filter Items</h3>
  <button class="reset-filter">
          reset
        </button>
  <ul class="filter-options">

    <li class="filter-list">
      <div><input type="checkbox" value="tag1" data-filter_id="tag1"> Our Solutions</div>
    </li>

    <li class="filter-list">
      <div><input type="checkbox" value="tag2" data-filter_id="tag2"> Service categories</div>
    </li>

  </ul>

  <div>
    Country / Region
  </div>
  <form class="filter-dropdown">
    <select class="event-type-select">

      <option value="all">All</option>

      <option value="belgium">Belgium</option>

      <option value="united kingdom">United Kingdom</option>

    </select>
  </form>
</div>

<div class="card-wrapper">
  <div class="card-col">


    <div class="card-col-item item-border 
                     tag1
                " data-eventtype="belgium">
      <div class="card-item-img " style="background-image:url('https://f.hubspotusercontent20.net/hubfs/7788778/Card Images/pexels-photo-209251.jpeg');">

      </div>
      <div class="card-inner-col ">
        <div class="card-tags">


          our solutions

        </div>
        <div class="card-item-title">
          <h4 class="PrimaryDarkBlue">
            Lorem Ipsum Dolor
          </h4>

        </div>
      </div>
    </div>


    <div class="card-col-item item-border 
                     tag2
                " data-eventtype="united kingdom">
      <div class="card-item-img " style="background-image:url('https://f.hubspotusercontent20.net/hubfs/7788778/Card Images/pexels-photo-209251.jpeg');">

      </div>
      <div class="card-inner-col ">
        <div class="card-tags">


          Imagery Services Service categories

        </div>
        <div class="card-item-title">
          <h4 class="PrimaryDarkBlue">
            Lorem Ipsum Dolor
          </h4>

        </div>
      </div>
    </div>


    <div class="card-col-item item-border tag3 " data-eventtype="belgium">
      <div class="card-item-img " style="background-image:url('https://f.hubspotusercontent20.net/hubfs/7788778/Card Images/pexels-photo-209251.jpeg');">

      </div>
      <div class="card-inner-col ">
        <div class="card-tags">


          Service categories

        </div>
        <div class="card-item-title">
          <h4 class="PrimaryDarkBlue">
            Lorem Ipsum Dolor
          </h4>

        </div>
      </div>

    </div>


  </div>

Комментарии:

1. Большое спасибо, что сработало отлично! Мне нужно будет освежить свои навыки js 🙂 Обычно мне не нужно создавать подобные фильтры. Спасибо за объяснение!