Question

我正在尝试使我的同位素网格复位，以清除所有过滤器和搜索，并且在进行任何交互之前，一切都恢复到原始状态。

到目前为止，事情已经在一定程度上得到了解决，但是“ 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函数下正常工作……但是我觉得应该有一种方法可以缩短所有这些工作。这可能吗？

Answer 1

自从我至少弄清楚如何完成我的第一个问题以来，这是那些到这里来的人都提出相对相同（或相同）问题的答案：

public void afterTextChanged(Editable string)
{
    CharacterStyle[] toBeRemovedSpans = string.getSpans(0, string.length(),
                                                MetricAffectingSpan.class);
    for (int index = 0; index < toBeRemovedSpans; index++)
        string.removeSpan(toBeRemovedSpans[index]);
    }
}

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

同位素过滤器+重置搜索

2 个答案: