为投资组合创建过滤部分

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>LI。如果您更改 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>

还有一件事，它写在网站的文档中，但信息并不突出。作者应该添加某种巨大的 boldy/red 横幅，其中包含对特定部分很重要的文本。您需要使用 css 隐藏所有元素。不做的话插件也能用，就是过滤数据的时候会有点跳动

Before we get to the fun part, there’s one small but crucial CSS rule we must add to our project’s stylesheet to hide our target elements. By making our target elements hidden by default we can both control the animation of how our elements appear, and also prevent any unwanted flash of content while MixItUp instantiates. This is particularly useful if we only want to show a small subset of our target elements initially or if MixItUp’s initial loading is delayed by other JavaScript on the page.

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();
            }
        });
    }

});

首先，当您单击 "all"、"cats" 或 "dogs" 时，您 select 您的类别。如果 selected 类别是 "all" 则显示所有图像，如果是 "cats" 或 "dogs" 则仅显示带有 "cats" 或 "dogs" 的图像class.

您可以查看更新后的 fiddle：http://jsfiddle.net/sm2LLtav/17/

希望它对你有用，干杯。

为投资组合创建过滤部分

Creating a filtering section for portfolio

html

jquery

mixitup