javascript - jQuery 对下拉列表和复选框过滤器的结果进行排序

Question

我有一个应该按标签和国家排序的项目列表。我有一个标签复选框列表和一个带有国家/地区下拉列表的表单。

到目前为止它们都可以正常工作，但是我不知道如何让它们一起工作。选择国家/地区后，仅应显示带有国家/地区和选中的复选框标签的项目。

这是我目前拥有的: - fiddle

$(".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%20Images/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%20Images/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%20Images/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>

Answer 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 && 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%20Images/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%20Images/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%20Images/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>