使用选择菜单时,同位素活动类

时间:2012-07-01 02:56:46

标签: jquery plugins jquery-isotope

我正在使用Metafizzy的Isotope插件并将其设置为使用选择菜单进行过滤,如下所示:http://jsfiddle.net/trewknowledge/jJZEN/

    $(function() {

    var $container = $('#container'),
        $select = $('#filters select');

    $container.isotope({
        itemSelector: '.item'
    });

    $select.change(function() {
        var filters = $(this).val();
;
        $container.isotope({
            filter: filters
        });
    });

});​

我想弄清楚的是当过滤器变量已被使用时,我将如何向所选元素添加高亮/活动类。

1 个答案:

答案 0 :(得分:5)

试试这个:

$select.change(function() {
        var filters = $(this).val();
        $('.container div').removeClass('active');
        $(filters).addClass('active');
        $container.isotope({
            filter: filters
        });
});

DEMO

你也可以试试<option value=".item">All</option>而不是<option value="*">All</option>这太慢了。

$select.change(function() {
        var filters = $(this).val();
        $('.active').removeClass('active');
        if (filters != '.item') {
            $( filters).addClass('active');
        }
        $container.isotope({
            filter: filters
        });
});

DEMO