堆棧內存溢出
  簡體   English   中英

同位素過濾器+重置搜索

[英]isotope filters + search with reset

 原文  2018-07-17 19:46:36  2   2    jquery/ search/ reset/ jquery-isotope/ isotope

問題描述

我試圖通過重置使我的同位素網格工作，其中清除所有過濾器和搜索，並且在進行任何交互之前，一切恢復到原始狀態。

到目前為止，我在某種程度上已經弄清了一切，但是，“ li”元素的“活動”狀態無法正常工作-而且，我也不喜歡要達到的目標至少在這一點上...復制代碼，是否有更好的方法來處理所有這些問題？

我現在遇到的問題是，如果默認情況下將網格設置為“全部”，那么我將在搜索字段中鍵入文本，然后選擇一個過濾器，重置后，活動狀態將保持在我選擇的過濾器上如果不應該，則應返回到其默認值“ 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函數下.directory_search_reset工作……但是我覺得應該有一種方法可以縮短這些工作。 這可能嗎？

2 個解決方案

解決方案1
 0 已采納  2018-07-19 13:12:34

由於我至少弄清楚了如何完成我的第一個問題，因此以下是那些在此處停留的相對相同（或相同）問題的答案： 

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
 0  2019-06-06 06:45:02

我找到了避免復制代碼的解決方案。 當在您的輸入中檢測到鍵盤輸入時，將觸發過濾。 因此，您只需要添加一行模擬它的代碼即可。 

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 重置 jQuery IsoTope 過濾器和排序 同位素：重置所有組合過濾器 清除搜索過濾器后，重置pimefaces數據表 同位素切換組合過濾器 jQuery同位素-組合過濾器 實現同位素過濾器（基本） 結合 jQuery Isotope 過濾器 組合過濾器同位素Wordpress 組合過濾器Jquery同位素 jQuery同位素上的多個過濾器
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM