如何使多類別過濾器使用jQuery，HTML和CSS

Question

我做了一個小網站向你展示我的問題：www.brainfmedia.com

顯示可以與導航元素（全部過濾組合，UI設計，...）

我想將此「簡單」過濾器更改爲「多類別」過濾器。

示例：我想選擇「UI設計」，然後顯示所有UI設計項目。然後，我想再次篩選標準「可用;按需」和「廉價，中等，昂貴」等標準。但我不想在我的結果中包含所有項目（甚至是其他主要類別）。我現在的問題是，我一次只能篩選一個類別。

我必須在我的HTML中進行更改。我的方法有更簡單的方法嗎？非常感謝。

下面是HTML文件的一部分，所以你可以理解的代碼更好：

<div class="sorting-block"> 
    <ul class="sorting-nav sorting-nav-v1 text-center"> 
     <li class="filter" data-filter="all">All</li> 
     <li class="filter" data-filter="category_1">UI Design</li> 
     <li class="filter" data-filter="category_2">Wordpress</li> 
     <li class="filter" data-filter="category_3">HTML5/CSS3</li> 
     <li class="filter" data-filter="category_4">Bootstrap 3</li> 
    </ul> 

    <ul class="row sorting-grid"> 
     <li class="col-md-3 col-sm-6 col-xs-12 mix category_1 category_3" data-cat="1"> 
      <a href="#"> 
       <img class="img-responsive" src="assets/img/main/11.jpg" alt=""> 
       <span class="sorting-cover"> 
        <span>Happy New Year</span> 
        <p>Anim pariatur cliche reprehenderit</p> 
       </span> 
      </a> 
     </li> 
     <li class="col-md-3 col-sm-6 col-xs-12 mix category_3 category_1" data-cat="3"> 
      <a href="#"> 
       <img class="img-responsive" src="assets/img/main/12.jpg" alt=""> 
       <span class="sorting-cover"> 
        <span>Happy New Year</span> 
        <p>Anim pariatur cliche reprehenderit</p> 
       </span> 
      </a> 
     </li> 
     <li class="col-md-3 col-sm-6 col-xs-12 mix category_2 category_1" data-cat="2"> 
      <a href="#"> 
       <img class="img-responsive" src="assets/img/main/13.jpg" alt=""> 
       <span class="sorting-cover"> 
        <span>Happy New Year</span> 
        <p>Anim pariatur cliche reprehenderit</p> 
       </span> 
      </a> 
     </li> 
     <li class="col-md-3 col-sm-6 col-xs-12 mix category_3 category_4" data-cat="3"> 
      <a href="#"> 
       <img class="img-responsive" src="assets/img/main/3.jpg" alt=""> 
       <span class="sorting-cover"> 
        <span>Happy New Year</span> 
        <p>Anim pariatur cliche reprehenderit</p> 
       </span> 
      </a> 
     </li> 
     <li class="col-md-3 col-sm-6 col-xs-12 mix category_2 category_1 category_4" data-cat="2"> 
      <a href="#"> 
       <img class="img-responsive" src="assets/img/main/2.jpg" alt=""> 
       <span class="sorting-cover"> 
        <span>Happy New Year</span> 
        <p>Anim pariatur cliche reprehenderit</p> 
       </span> 
      </a> 
     </li> 
     <li class="col-md-3 col-sm-6 col-xs-12 mix category_4" data-cat="1"> 
      <a href="#"> 
       <img class="img-responsive" src="assets/img/main/6.jpg" alt=""> 
       <span class="sorting-cover"> 
        <span>Happy New Year</span> 
        <p>Anim pariatur cliche reprehenderit</p> 
       </span> 
      </a> 
     </li> 
     <li class="col-md-3 col-sm-6 col-xs-12 mix category_2 category_3 category_4" data-cat="2"> 
      <a href="#"> 
       <img class="img-responsive" src="assets/img/main/8.jpg" alt=""> 
       <span class="sorting-cover"> 
        <span>Happy New Year</span> 
        <p>Anim pariatur cliche reprehenderit</p> 
       </span> 
      </a> 
     </li> 
     <li class="col-md-3 col-sm-6 col-xs-12 mix category_1 category_2 category_3" data-cat="1"> 
      <a href="#"> 
       <img class="img-responsive" src="assets/img/main/1.jpg" alt=""> 
       <span class="sorting-cover"> 
        <span>Happy New Year</span> 
        <p>Anim pariatur cliche reprehenderit</p> 
       </span> 
      </a> 
     </li> 
     <li class="col-md-3 col-sm-6 col-xs-12 mix category_4 category_2" data-cat="1"> 
      <a href="#"> 
       <img class="img-responsive" src="assets/img/main/11.jpg" alt=""> 
       <span class="sorting-cover"> 
        <span>Happy New Year</span> 
        <p>Anim pariatur cliche reprehenderit</p> 
       </span> 
      </a> 
     </li> 
     <li class="col-md-3 col-sm-6 col-xs-12 mix category_3 category_2" data-cat="3"> 
      <a href="#"> 
       <img class="img-responsive" src="assets/img/main/12.jpg" alt=""> 
       <span class="sorting-cover"> 
        <span>Happy New Year</span> 
        <p>Anim pariatur cliche reprehenderit</p> 
       </span> 
      </a> 
     </li> 
    </ul> 

    <div class="clearfix"></div> 
</div> 

Answer 1

您使用的jQuery.mixitup腳本有一個multiFilter選項。當你激活它時，你可以添加額外的過濾器並將它們合併。

$('.sorting-grid').mixitup({multiFilter:true});