0

jQueryを使用してライブフィルターを行っています。名前に文字列が含まれる要素を選択したり、場所やアクティビティでフィルタリングした要素を選択したりできます。それがアイデアです。私のスクリプトでは問題なく動作していますが、別のモードです。1 回の一致ですべてのフィルターに参加したいと思います。どうすればできますか？ありがとう！

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

2 に答える 2

0

コードを変更するのは少し難しいですが、ここにアイデアがあります:

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

もちろん、そこには最適化の余地がたくさんありますが、それでも、先ほど言ったように、それは単なる「アイデア」です。

于 2014-01-02T00:19:59.253 に答える
0

スクリプトが機能しています!!!!!!!! 今、私は最適化に取り組まなければなりません...何か考えはありますか?? ：） ありがとうございました！！！！！！

$(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;
                });
    });
于 2014-01-03T14:15:59.627 に答える