Question

我正在尝试使用同位素库过滤我的画廊。我有一个单独工作的按钮列表和一个单独工作的文本框。我正在尝试将它们组合到过滤器中，但暂时没有运气。

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;
    });
});

我希望他们一起努力。喜欢：

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

或者当我使用类别过滤器进行过滤时，它应该使用包括是否编写了任何关键字的过滤器进行过滤。

Answer 1

我这样解决了它，以防万一有人需要它：

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;
    });
});

带有选择和关键字搜索的jQuery同位素过滤器无法一起使用

1 个答案: