Question

我在网站上工作，现在卡在jQuery同位素上，我需要一些帮助我正在使用jquery同位素来过滤div，但不知何故它不起作用

我的HTML：

<center><a href="" class="filter" rel="all">show all</a> | <a href="" class="filter" rel="green">green</a> | <a href="" class="filter" rel="blue">blue</a> | <a href="" class="filter" rel="pink">pink</a></center>
<br>
<div class="wrap">
    <div class="box green"></div>
    <div class="box blue"></div>
    <div class="box pink"></div>
    <div class="box blue"></div>
    <div class="box pink"></div>
    <div class="box green"></div>
    <div class="box pink"></div>
    <div class="box green"></div>
    <div class="box blue"></div>

    <div class="clear"></div>
</div>

我的CSS：

.wrap{
    margin: auto;
    width: 660px;
    background: #ccc;
}
.clear{
    clear: both;
}
.box{
    float: left;
    width: 200px;
    height: 200px;
    margin: 10px 10px;
}
.green{
    background: green;
}
.blue{
    background: blue;
}
.pink{
    background: pink;
}

我的Javascript：

$(document).ready(function() {
    $('.wrap').isotope({
        itemSelector: '.box'
    });

    $('a.filter').click(function() {
        var to_filter = $(this).attr('rel');
        if(to_filter == 'all') {
            $('.box').fadeIn();
        } else {
            $('.box').each(function() {
                if($(this).hasClass(to_filter)) {
                    $(this).fadeIn();
                } else {
                    $(this).fadeOut();
                }
            });
        }
        return false;
    });
});

或者您可以查看此链接：http://jsfiddle.net/wPdXF/

我的确切问题： 单击过滤器链接后，div不会随机播放/动画

有人可以帮我吗？

抱歉我的英文不好

Answer 1

你遇到的问题（它“过滤”项目，但没有重新定位它们，或重新定位动画）是因为你使用的是jquery内置的hide / show而不是同位素的内置过滤机制。

$(document).ready(function() {
$('.wrap').isotope();

$('a.filter').click(function() {
    var to_filter = $(this).attr('rel');
    if(to_filter == 'all') {
        $('.wrap').isotope({filter: '.box'});
    } else {
        $('.wrap').isotope({filter: '.'+to_filter});
    }

});
});

工作小提琴：http://jsfiddle.net/yDPxK/1/

你需要做的是为过滤器提供同位素（你从rel属性中匹配的类名。使用jquery的默认fadeIn / fadeOut只会改变它们的显示属性值，而不是改变它们的位置在DOM中。

过滤文档：http://isotope.metafizzy.co/docs/filtering.html

用于过滤的jQuery同位素不工作

1 个答案: