同位素过滤器 + 重置搜索答案

【问题标题】：isotope filters + search with reset同位素过滤器 + 重置搜索
【发布时间】：2018-07-17 19:46:36
【问题描述】：

我正在尝试通过重置使我的同位素网格工作，其中所有过滤器和搜索都将被清除，并且在任何交互之前一切都会恢复到其原始状态。

到目前为止，事情已经在一定程度上得到了解决，但是，“li”元素的“活动”状态不起作用 - 另外，我不喜欢我必须做的事情至少达到这一点...重复代码，有没有更好的方法来处理这一切？

我现在遇到的问题是，如果我将网格默认设置为“ALL”，然后我在搜索字段中输入文本，然后选择一个过滤器，当我重置时，活动状态保持在我不应该选择的过滤器，它应该回到默认的“ALL”过滤器。希望我解释得足够好：/

对此的任何帮助表示赞赏。

JS：

var qsRegex;
var buttonFilter;
// init Isotope
var $grid = $('.directory').isotope({
    itemSelector: '.listing, .listing_title, .listing_notice', // IMPORTANT CLASSES HERE -- '.listing = container for website link', '.listing_title = container for website link title', '.listing_notice = Notice to inform there is no website under this category'
    layoutMode: 'fitRows',
    filter: function() {
        var $this = $(this);
        var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
        var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
        return searchResult && buttonResult;
    }
});
$('.directory_menu ul').on( 'click', 'li', function() {
    buttonFilter = $( this ).attr('data-filter');
    $grid.isotope();
});
// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
    qsRegex = new RegExp( $quicksearch.val(), 'gi' );
    $grid.isotope();
}));
// change active class on buttons
$('.directory_menu ul').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', 'li', function() {
        $buttonGroup.find('.active').removeClass('active');
        $( this ).addClass('active');
    });
});
// debounce so filtering doesn't happen every millisecond
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 );
    };
}

// RESETTING
$('.directory_search_reset').on('click', function() {
    //hide reset button
    $('.directory_search_reset').hide();
    //clear search field
    $('.directory_search input[type="search"]').val('');
    var qsRegex;
    var buttonFilter;
    // init Isotope
    var $grid = $('.directory').isotope({
        itemSelector: '.listing, .listing_title, .listing_notice', // IMPORTANT CLASSES HERE -- '.listing = container for website link', '.listing_title = container for website link title', '.listing_notice = Notice to inform there is no website under this category'
        layoutMode: 'fitRows',
        filter: function() {
            var $this = $(this);
            var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
            var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
            return searchResult && buttonResult;
        }
    });
    $('.directory_menu ul').on( 'click', 'li', function() {
        buttonFilter = $( this ).attr('data-filter');
        $grid.isotope();
    });
    // use value of search field to filter
    var $quicksearch = $('.quicksearch').keyup( debounce( function() {
        qsRegex = new RegExp( $quicksearch.val(), 'gi' );
        $grid.isotope();
    }));
    // change active class on buttons
    $('.directory_menu ul').each( function( i, buttonGroup ) {
        var $buttonGroup = $( buttonGroup );
        $buttonGroup.on( 'click', 'li', function() {
            $buttonGroup.find('.active').removeClass('active');
            $( this ).addClass('active');
        });
    });
    // debounce so filtering doesn't happen every millisecond
    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 );
        };
    }
});

$('.directory_search input[type="search"]').keyup(function() {
    $('.directory_search_reset').show();
});

================================================ ==============================

编辑

终于弄清楚了如何完成我所寻求的。下面是代码：

var qsRegex;
var buttonFilter;
// init Isotope
var $grid = $('.directory').isotope({
    itemSelector: '.listing, .listing_title, .listing_notice', // IMPORTANT CLASSES HERE -- '.listing = container for website link', '.listing_title = container for website link title', '.listing_notice = Notice to inform there is no website under this category'
    layoutMode: 'fitRows',
    filter: function() {
        var $this = $(this);
        var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
        var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
        return searchResult && buttonResult;
    }
});
$('.directory_menu ul').on( 'click', 'li', function() {
    buttonFilter = $( this ).attr('data-filter');
    $grid.isotope();
});
// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
    qsRegex = new RegExp( $quicksearch.val(), 'gi' );
    $grid.isotope();
}));
// change active class on buttons
$('.directory_menu ul').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', 'li', function() {
        $buttonGroup.find('.active').removeClass('active');
        $( this ).addClass('active');
    });
});
// debounce so filtering doesn't happen every millisecond
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 );
    };
}

// RESETTING
$('.directory_search_reset').on('click', function() {
    //hide reset button
    $('.directory_search_reset').hide();
    //clear search field
    $('.directory_search input[type="search"]').val('');
    var qsRegex;
    var buttonFilter;
    // init Isotope
    var $grid = $('.directory').isotope({
        itemSelector: '.listing, .listing_title, .listing_notice', // IMPORTANT CLASSES HERE -- '.listing = container for website link', '.listing_title = container for website link title', '.listing_notice = Notice to inform there is no website under this category'
        layoutMode: 'fitRows',
        filter: function() {
            var $this = $(this);
            var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
            var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
            return searchResult && buttonResult;
        }
    });
    $('.directory_menu ul').on( 'click', 'li', function() {
        buttonFilter = $( this ).attr('data-filter');
        $grid.isotope();
    });
    // use value of search field to filter
    var $quicksearch = $('.quicksearch').keyup( debounce( function() {
        qsRegex = new RegExp( $quicksearch.val(), 'gi' );
        $grid.isotope();
    }));
    // change active class on buttons
    $('.directory_menu ul').each( function( i, buttonGroup ) {
        var $buttonGroup = $( buttonGroup );
        $buttonGroup.on( 'click', 'li', function() {
            $buttonGroup.find('.active').removeClass('active');
            $( this ).addClass('active');
        });
    });
    // debounce so filtering doesn't happen every millisecond
    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 );
        };
    }
    **$('li').removeClass('active'); //ADDED
    $('li:first-of-type').addClass('active'); //ADDED**
});
//show reset icon once input field has been typed in
$('.directory_search input[type="search"]').keyup(function() {
    $('.directory_search_reset').show();
});

现在我的问题是：有没有办法缩短所有这些代码？现在，我已经复制了大部分内容，因为它需要在 .directory_search_reset 函数下工作......但我觉得应该有一种方法可以缩短所有这些。这可能吗？

【问题讨论】：

请参阅原始帖子的编辑部分。谢谢！

标签： jquery search reset jquery-isotope

【解决方案1】：

既然我至少想出了如何完成我最初的问题，以下是那些因相对相同（或相同）问题而停留在这里的人的答案：

var qsRegex;
var buttonFilter;
// init Isotope
var $grid = $('.directory').isotope({
    itemSelector: '.listing, .listing_title, .listing_notice', // IMPORTANT CLASSES HERE -- '.listing = container for website link', '.listing_title = container for website link title', '.listing_notice = Notice to inform there is no website under this category'
    layoutMode: 'fitRows',
    filter: function() {
        var $this = $(this);
        var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
        var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
        return searchResult && buttonResult;
    }
});
$('.directory_menu ul').on( 'click', 'li', function() {
    buttonFilter = $( this ).attr('data-filter');
    $grid.isotope();
});
// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
    qsRegex = new RegExp( $quicksearch.val(), 'gi' );
    $grid.isotope();
}));
// change active class on buttons
$('.directory_menu ul').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', 'li', function() {
        $buttonGroup.find('.active').removeClass('active');
        $( this ).addClass('active');
    });
});
// debounce so filtering doesn't happen every millisecond
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 );
    };
}

// RESETTING
$('.directory_search_reset').on('click', function() {
    //hide reset button
    $('.directory_search_reset').hide();
    //clear search field
    $('.directory_search input[type="search"]').val('');
    var qsRegex;
    var buttonFilter;
    // init Isotope
    var $grid = $('.directory').isotope({
        itemSelector: '.listing, .listing_title, .listing_notice', // IMPORTANT CLASSES HERE -- '.listing = container for website link', '.listing_title = container for website link title', '.listing_notice = Notice to inform there is no website under this category'
        layoutMode: 'fitRows',
        filter: function() {
            var $this = $(this);
            var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
            var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
            return searchResult && buttonResult;
        }
    });
    $('.directory_menu ul').on( 'click', 'li', function() {
        buttonFilter = $( this ).attr('data-filter');
        $grid.isotope();
    });
    // use value of search field to filter
    var $quicksearch = $('.quicksearch').keyup( debounce( function() {
        qsRegex = new RegExp( $quicksearch.val(), 'gi' );
        $grid.isotope();
    }));
    // debounce so filtering doesn't happen every millisecond
    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 );
        };
    }
    $('li').removeClass('active'); //ADDED
    $('li:first-of-type').addClass('active'); //ADDED
});
//show reset icon once input field has been typed in
$('.directory_search input[type="search"]').keyup(function() {
    $('.directory_search_reset').show();
});

【讨论】：

【解决方案2】：

我找到了避免复制您的代码的解决方案。当在您的输入中检测到按键时，将触发过滤。所以你只需要添加一行代码来模拟它。

// RESETTING
$('.directory_search_reset').on('click', function() {
  //hide reset button
  $('.directory_search_reset').hide();
  //clear search field
  $('.directory_search input[type="search"]').val('');
  $('.directory_search input[type="search"]').keyup();
})

【讨论】：