0

我正在尝试创建一个根据您选择的类别进行过滤的投资组合页面。我遇到的问题是，当我单击类别时，图像不会移动以显示需要选择的图像。

我也在使用 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

这可能是我没有看到的非常小的东西。我希望我能解释一切。

4

2 回答 2

0

所以...由于一些无法解释的原因，您似乎需要使用 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>

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

在我们进入有趣的部分之前，我们必须将一条小而关键的 CSS 规则添加到项目的样式表中以隐藏我们的目标元素。通过默认隐藏我们的目标元素，我们既可以控制元素的动画显示方式，也可以防止在 MixItUp 实例化时出现任何不需要的内容闪现。如果我们最初只想显示一小部分目标元素，或者如果 MixItUp 的初始加载被页面上的其他 JavaScript 延迟，这将特别有用。

CSS：

#Container .mix{
    display: none;
}

如果您正确遵循所有说明，则过滤将起作用。 JSFIDDLE

于 2015-08-27T16:05:21.993 回答
0

你为什么不使用简单的 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”，则仅显示具有“cats”或“dogs”类的图像。

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

希望它对你有用，干杯。

于 2015-08-27T16:14:31.307 回答