jquery - 使用选择菜单时的同位素 active 类别

标签 jquery plugins jquery-isotope

我正在使用 Metafizzy 的同位素插件,并将其设置为使用选择菜单进行过滤,如下所示: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
        });
    });

});​

我想要弄清楚的是,当过滤器变量已被使用时,如何向所选元素添加突出显示/事件类。

最佳答案

试试这个:

$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

关于jquery - 使用选择菜单时的同位素 active 类别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11279226/

相关文章:

javascript - Jquery Isotope 位于具有不同目标 div 的两个不同页面上

javascript - knockoutjs 和同位素添加新项目导致第一个元素跳来跳去

javascript - 在 Sails 中显示 PostController.js 发送的字符串变量的 ejs 代码

android - Facebook unity SDK 与其他插件的实现

plugins - Phonegap 3.0 InAppBrowser - 不提供用户关闭的方式

spring - Grails Spring Security插件-插件目录在哪里?

jquery - 如果该行的 <td> 在我的下面的代码中仅包含 B,我想删除该行?

javascript - ES6 - 如何在绑定(bind) `this` 类后访问 `this` 元素?

javascript - 如何通过表单发送裁剪后的图像

filter - jQuery Isotope - 多个过滤器的问题