爲投資組合創建過濾部分

Question

我在創建一個投資組合頁面，根據您選擇的類別進行過濾。我遇到的問題是，當我點擊類別時，圖像不會移動以顯示需要選擇的圖像。

我還使用mixitup.min.js

我的HTML

<ul id="filter-list" class="clearfix"> 
<li class="filter" data-filter="all">All</li> 
<li class="filter" data-filter="dogs">Dogs</li> 
<li class="filter" data-filter="cats">cats</li> 
</ul> 

<ul id="portfolio2"> 
<li class="item cats"><a href="#"><img src="http://i.imgur.com/YW5Y1YX.jpg"> </a> 
</li> 
<li class="item cats"><a href="#"><img src="http://i.imgur.com/vFEg6ef.jpg"></a> 
</li> 
<li class="item dogs"><a href="#"><img src="http://i.imgur.com/cEcFlSA.jpg"></a> 
</li> 
<li class="item dogs"><a href="#"><img src="http://i.imgur.com/UyDuMVX.jpg"></a> 
</li> 
<li class="item dogs"><a href="#"><img src="http://i.imgur.com/cxMNwCe.jpg"></a> 
</li> 
<li class="item cats"><a href="#"><img src="http://i.imgur.com/PHKC3T9.jpg"></a> 
</li> 
<li class="item cats"><a href="#"><img src="http://i.imgur.com/naM08qz.jpg"></a> 
</li> 
<li class="item cats"><a href="#"><img src="http://i.imgur.com/t4Erv0t.jpg"></a> 
</li> 

我的CSS

#filter-list { 
display: block; 
width: 100%; 
text-align: center; 
margin-bottom: 25px; 
} 
#filter-list li { 
display: inline-block; 
width: auto; 
padding: 6px 10px; 
margin-right: 15px; 
font-size: 1.2em; 
cursor: pointer; 
text-shadow: 1px 1px 0 #fff; 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
border-radius: 3px; 
} 
#filter-list li:hover { 
background: #e7e2eb; 
} 
#filter-list li.active { 
font-weight: bold; 
background: #d8c5e7; 
} 
/** media queries **/ 
@media screen and (max-width: 720px) { 
h1 { 
    font-size: 2.7em; 
} 
} 
@media screen and (max-width: 500px) { 
h1 { 
    font-size: 2.0em; 
} 
#filter-list { 
    padding: 0 18px; 
} 
#filter-list li { 
    display: block; 
    margin-bottom: 3px; 
} 
#portfolio { 
    margin-bottom: 20px; 
} 
#portfolio .item { 
    width: 100%; 
    margin-bottom: 12px; 
    margin-right: 0; 
} 

我的JS

$(function() { 

$('#portfolio2').mixitup({ 
    targetSelector: '.item', 
    transitionSpeed: 450 
}); 
}); 

這是一個jsfiddle：JSFIDDLE

這可能是一個非常小，我沒有看到。 我希望我解釋一切正常。

Answer 1

所以...對於一些無法解釋的原因，您似乎需要使用DIV而不是UL> LIs。如果您更改HTML，它將按計劃運行。

HTML：

<div id="Container"> 
    <div class="mix cats"><a href="#"><img src="http://i.imgur.com/YW5Y1YX.jpg"></a></div> 
    <div class="mix cats"><a href="#"><img src="http://i.imgur.com/vFEg6ef.jpg"></a></div> 
    <div class="mix dogs"><a href="#"><img src="http://i.imgur.com/cEcFlSA.jpg"></a></div> 
    <div class="mix dogs"><a href="#"><img src="http://i.imgur.com/UyDuMVX.jpg"></a></div> 
    <div class="mix dogs"><a href="#"><img src="http://i.imgur.com/cxMNwCe.jpg"></a></div> 
    <div class="mix cats"><a href="#"><img src="http://i.imgur.com/PHKC3T9.jpg"></a></div> 
    <div class="mix cats"><a href="#"><img src="http://i.imgur.com/naM08qz.jpg"></a></div> 
    <div class="mix cats"><a href="#"><img src="http://i.imgur.com/t4Erv0t.jpg"></a></div> 
</div> 

另外一個東西，它是寫在網站上的文檔中，但信息並不突出。作者應該添加一些與特定部分重要的文字的巨大的大膽/紅色的橫幅。你需要用CSS隱藏所有的元素。如果你不這樣做，這個插件就可以工作，但是在過濾數據時它會有點跳動。

在開始有趣的部分之前，我們必須添加一個小而關鍵的CSS規則 以隱藏我們的目標元素。通過默認隱藏我們的目標元素，我們既可以控制元素出現的動畫，也可以在MixItUp實例化時防止任何不需要的內容閃爍。如果我們最初只想顯示目標元素的一小部分，或者如果MixItUp的初始加載被頁面上的其他JavaScript延遲，這特別有用。

CSS：

#Container .mix{ 
    display: none; 
} 

如果您正確執行了所有指令，該過濾系統將。 JSFIDDLE

Answer 2

爲什麼你不使用簡單的jQuery函數來做到這一點？

$(function() { 

    var selectedCategory = ""; 

    $('.filter').on('click', function(){ 

     selectedCategory = $(this).attr('data-filter'); 
     if(selectedCategory === 'all'){ 
      $('#portfolio2').find('li').show(); 
     } else { 
      $('#portfolio2').find('li').show(); 
      showImages(selectedCategory); 
     } 
    }); 

    function showImages(cat){ 
     $('#portfolio2').find('li').each(function(){ 
      if(!$(this).hasClass(cat)){ 
       $(this).hide(); 
      } 
     }); 
    } 

}); 

首先，當您點擊「全部」，「貓」或「狗」時，選擇您的類別。 如果所選類別爲「全部」，則顯示所有圖像，如果是「貓」或「狗」，則只顯示帶有「貓」或「狗」類的圖像。

您可以檢查更新的小提琴：http://jsfiddle.net/sm2LLtav/17/

希望它爲你工作，歡呼聲。