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＆gt; 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/

希望它适合你，干杯。

为投资组合创建过滤部分

2 个答案: