jQuery實時過濾器

Question

我正在使用jQuery進行實時過濾。 您可以選擇名稱中包含字符串的元素或/和/或按位置和/或活動過濾的元素。 那是主意。 用我的腳本可以正常工作，但處於單獨模式。 我只想在一場比賽中加入所有過濾器。 我該怎么辦？ 謝謝！

$(document).ready(function (){
                jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
                    return function( elem ) {
                        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
                    };
                });
                $("input").keyup(function(){
                            $(this).change();     
                });
                $("input").change(function(){
                            var filter = $(this).val().toLowerCase();
                            if(filter) {
                                 $matches = $('#list_pr, #list_ba').find('a:Contains(' + filter + ')').parent();
                                  $('li', '#list_pr, #list_ba').not($matches).slideUp();
                                   $matches.slideDown();
                            }else{
                                 $('#list_pr, #list_ba').find("li").slideDown();
                            }
                            return false;
                });
                $("#location").change(function(){
                    var filter = $(this).val();
                    if(filter != 'default') {
                        $matches = $('#list_pr').find("li a[alt*="+filter+"]").parent();
                         $('li', '#list_pr, #list_ba').not($matches).slideUp();
                         $matches.slideDown();
                    }else{
                         $('#list_pr, #list_ba').find("li").slideDown();
                    }
                    return false;
                });
                $("#category").change(function(){
                    var filter = $(this).val();
                    alert(filter);
                    if(filter != 'default') {
                        $matches = $('#list_pr').find("li a[alt*="+filter+"]").parent();
                         $('li', '#list_pr, #list_ba').not($matches).slideUp();
                         $matches.slideDown();
                    }else{
                         $('#list_pr, #list_ba').find("li").slideDown();
                    }
                    return false;
                });
    });

Answer 1

修改您的代碼有點困難，但是這里有個想法：

function filterByText(arrayToFilter, filterValue) {
    var result = [];
    for (var i = 0; i < arrayToFilter.length; ++i) {
        if ( /* arrayToFilter[i] matches criteria */ ) {
            result.push(arrayToFilter[i]);
        } 
    }
    return result;
}

function filterByLocation(arrayToFilter, filterValue) {
    var result = [];
    for (var i = 0; i < arrayToFilter.length; ++i) {
        if ( /* arrayToFilter[i] matches criteria */ ) {
            result.push(arrayToFilter[i]);
        } 
    }
    return result;
}

function filterByCategory(arrayToFilter, filterValue) {
    var result = [];
    for (var i = 0; i < arrayToFilter.length; ++i) {
        if ( /* arrayToFilter[i] matches criteria */ ) {
            result.push(arrayToFilter[i]);
        } 
    }
    return result;
}

function filter() {
    var result [];
    var listItems = $('#my_list li');
    var filterValue = $('#filter_input').val();

    result = filterByText(listItems, filterValue);

    if (/* filter by location is enabled */) {
        result = filterByLocation(result, filterValue);
    }
    if (/* filter by category is enabled */) {
        result = filterByCategory(result, filterValue);
    }

    // Present filtered items

    for (var i = 0; i < listItems.length; ++i) {
        if (result.indexOf(listItems[i]) > -1) {
            listItems[i].show(); // or .slideUp();
        } else {
            listItems[i].hide(); // or .slideDown();
        }
    }
}

$('#location, #category, input').change(function() {
    filter();
});

當然，那里還有很多優化的空間，但是，正如前面所說的，這只是一個“想法”。

Answer 2

我的腳本正常工作!!!!!!! 現在，我應該致力於優化...任何想法嗎？ ：） 謝謝！！！！！！

$(document).ready(function (){
                jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
                    return function( elem ) {
                        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
                    };
                });
                $("input").keyup(function(){
                        $(this).change();     
                });
                $("input, #provincia, #categoria").change(function(){
                    var filter1 = $("input").val().toLowerCase();
                    var filter2 = $("#provincia").val().toLowerCase().replace(" ","-");
                    var filter3 = $("#categoria").val().toLowerCase().split("/");
                    filter3 = filter3[0];

                    if(filter1 != '' && filter1 != 'nombre del comercio'){
                        if(filter2 != 'default' && filter3 == 'default'){
                            $matches = $('#list_pr, #list_ba').find("li a[title*="+filter1+"][title*="+filter2+"]").parent();
                        }else if(filter2 == 'default' && filter3 != 'default'){
                            $matches = $('#list_pr, #list_ba').find("li a[title*="+filter1+"][title*="+filter3+"]").parent();
                        }else if(filter2 != 'default' && filter3 != 'default'){
                            $matches = $('#list_pr, #list_ba').find("li a[title*="+filter1+"][title*="+filter2+"][title*="+filter3+"]").parent();   
                        }else{
                            $matches = $('#list_pr, #list_ba').find("li a[title*="+filter1+"]").parent();
                        }
                        $('li', '#list_pr, #list_ba').not($matches).slideUp();
                        $matches.slideDown();

                    }else if(filter2 != 'default'){
                        if(filter3 != 'default'){
                            $matches = $('#list_pr, #list_ba').find("li a[title*="+filter2+"][title*="+filter3+"]").parent();
                        }else{
                            $matches = $('#list_pr, #list_ba').find("li a[title*="+filter2+"]").parent();
                        }
                        $('li', '#list_pr, #list_ba').not($matches).slideUp();
                        $matches.slideDown();
                    }else if(filter3 != 'default'){
                        $matches = $('#list_pr, #list_ba').find("li a[title*="+filter3+"]").parent();

                        $('li', '#list_pr, #list_ba').not($matches).slideUp();
                        $matches.slideDown();
                    }else{
                        $('#list_pr, #list_ba').find("li").slideDown();

                    }
                    return false;
                });
    });