首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >不能同时使用选择和关键字搜索的jQuery同位素过滤器

不能同时使用选择和关键字搜索的jQuery同位素过滤器
EN

Stack Overflow用户
提问于 2019-01-15 15:26:55
回答 1查看 193关注 0票数 0

我正在试着用同位素库过滤我的图库。我有一个单独工作的按钮列表和一个单独工作的文本框。我正在尝试将这些组合到过滤器中,但目前还没有成功。

代码语言:javascript
运行
复制
var qsRegex;
var selector = '*';

function debounce(fn, threshold) {
    var timeout;
    threshold = threshold || 100;
    return function debounced() {
        clearTimeout(timeout);
        var args = arguments;
        var _this = this;
        function delayed() {
            fn.apply(_this, args);
        }
        timeout = setTimeout(delayed, threshold);
    };
}

$(window).load(function () {
    var $container = $('.portfolioContainer');

    $container.isotope({
        filter: function () {
            return qsRegex ? $(this).text().match(qsRegex) && selector : selector;
        },
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });

    var $quicksearch = $('#tbSearchBusiness').keyup(debounce(function () {
        qsRegex = new RegExp($quicksearch.val(), 'gi');
        $container.isotope();
    }, 200));

    $('.portfolioFilter a').click(function () {
        $('.portfolioFilter .current').removeClass('current');
        $(this).addClass('current');

        selector = $(this).attr('data-filter');

        $container.isotope();
        return false;
    });
});

我想让他们一起工作。像这样:

当我写一个单词时,它应该过滤它,而如果从其他过滤器中有任何选择。

或者当我用我的分类过滤器过滤时,它应该过滤它,如果有任何关键字写的话。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-01-15 16:31:47

我这样解决了它,以防有人需要它:

代码语言:javascript
运行
复制
var qsRegex;
var selector = '*';

function debounce(fn, threshold) {
    var timeout;
    threshold = threshold || 100;
    return function debounced() {
        clearTimeout(timeout);
        var args = arguments;
        var _this = this;
        function delayed() {
            fn.apply(_this, args);
        }
        timeout = setTimeout(delayed, threshold);
    };
}

$(window).load(function () {
    var $container = $('.portfolioContainer');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });

    var $quicksearch = $('#tbSearchBusiness').keyup(debounce(function () {
        qsRegex = $quicksearch.val().length > 0 ? new RegExp($quicksearch.val(), 'gi') : null;

        var filterFns = {
            kSearch: function () {
                return qsRegex ? $(this).text().match(qsRegex) : true;
            }
        };

        var filterValue = selector;

        filterValue = qsRegex ? filterFns['kSearch'] || filterValue : filterValue;

        $container.isotope({
            filter: filterValue,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });

    }, 200));

    $('.portfolioFilter a').click(function () {
        $('.portfolioFilter .current').removeClass('current');
        $(this).addClass('current');

        selector = $(this).attr('data-filter');

        var filterFns = {
            kSearch: function () {
                return qsRegex ? $(this).text().match(qsRegex) : true;
            }
        };

        var filterValue = selector;

        filterValue = qsRegex ? filterFns['kSearch'] || filterValue : filterValue;

        $container.isotope({
            filter: filterValue,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });

        return false;
    });
});
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54194341

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档