Фильтр на основе комбинации нескольких элементов выбора и одного выбора

Я хочу фильтровать (показывать/скрывать) элементы по классам. Я хочу, чтобы, скажем, 5 фильтров работали вместе.

<select id='filter4'>...</select>
<select id='filter5'>...</select>
<select id='filter6'>...</select>
<select id='filter7'>...</select>

а также

<select id='filter6' multiple>...</select>

JQuery:

jQuery(document).ready(function ($) {
    $("select").on("change", function () {
        var filterVal = $("select#filter4").val();
        var filterVal2 = $("select#filter5").val();
        var filterVal3 = $("select#filter6").val();
        var filterVal4 = $("select#filter7").val();
        var filterVal5 = $("select#filter8").val();
        var filterSelector = "";
        var filter2Selector = "";
        var filter3Selector = "";
        var filter4Selector = "";
        var filter5Selector = "";

        if (filterVal == "all" && filterVal2 == "all" && filterVal3 == "all" && filterVal4 == "all" && filterVal5 === null) {
            //show all items 
            $(".item").fadeIn("fast");
        } else {
            if (filterVal != "all") {
                filterSelector = "." + filterVal;
            }

            if (filterVal2 != "all") {
                filter2Selector = "." + filterVal2;
            }

            if (filterVal3 != "all") {
                filter3Selector = "." + filterVal3;
            }

            if (filterVal4 != "all") {
                filter4Selector = "." + filterVal4;
            }

            if (filterVal5 !== null) {
                filter5Selector = "." + filterVal5;
            }

            $(".item").hide();
            $(filterSelector + filter2Selector + filter3Selector + filter4Selector + filter5Selector).fadeIn("fast");
        }

    });
});

См. все в этом jsfiddle!

Первые четыре одиночных фильтра работают с любой проблемой. Пятый элемент множественного выбора не работает (фильтруется) должным образом, когда выбрано более одного параметра.

EDIT: необходимо было заменить запятые точками (несколько селекторов css) с помощью модификатора g (//g), который является глобальным соответствием:

$(filter4Selector + filter5Selector.replace(/,/g, ".")).fadeIn("fast");

см. http://jsfiddle.net/mahish/dum7n/.

Ответ ниже предлагает другой код, который также работает!


jquery filtering selection
person mahish    schedule 31.08.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Очистил ваш код и исправил несколько запросов. Обратите внимание, что:

.class1.class2.class3 означает class1 && class2 && class 3

.class1, .class2, .class3 означает class1 || class2 || class 3

Это было причиной предыдущей путаницы в комментариях.

jQuery(document).ready(function ($) {

    var values = [7, 8];

    $("select").on("change", function () {

        var showAll = true,
            show = [],
            joined;

        $.each(values, function (index, id) {
            var $el = $('#filter' + id),
                multi = $el.attr('multiple'),
                val = $el.val();

            if (multi) {
                if (val !== null) {
                    showAll = false;
                    $.each(val, function (i, v) {
                        show.push( v );
                    });
                }
            } else {
                if (val != 'all') {
                    showAll = false;
                    show.push( val );
                }
            }


        });

        console.log(showAll);
        console.log(show);

        if (showAll) {
            //show all items 
            $(".item").fadeIn("fast");
        } else {

            joined = '.' + show.join('.');

            console.log( joined );

            $(".item").hide();
            $( joined ).fadeIn("fast");
        }

    });

    $.each(values, function (index, id) {
        $('#filter' + id).chosen();
    });


});

http://jsfiddle.net/9SZkr/1/

person Dave Stein    schedule 31.08.2013
comment
Вау, это довольно аккуратно. Хорошая кривая обучения для меня. Хотя несколько вариантов все еще не работают. Я должен изменить язык Sry. - person mahish; 31.08.2013
comment
Я неправильно добавлял значения множественного выбора - person Dave Stein; 31.08.2013
comment
На самом деле, весь этот фильтр сейчас вообще не работает :( Скопируйте html из этой скрипты, чтобы он содержал буквы вместо чешских слов, чтобы четко видеть результаты. jsfiddle.net/mahish/Bd8S9 - person mahish; 31.08.2013
comment
Держите консоль открытой, и вы увидите все классы, которые она должна отображать. В вашей разметке их много, так что для меня это еще одна проблема :) - person Dave Stein; 31.08.2013
comment
Вам просто нужно $.each в получении нескольких значений.. 14 имеет это, как и другое - person Dave Stein; 31.08.2013
comment
Является ли console.log для классов show неправильным? Я вижу, что он заполняется всем. Вы уверены, что в вашей разметке есть соответствующие классы? - person Dave Stein; 31.08.2013
comment
значения, метки, классы изначально генерируются PHP. Консоль правильная, так как она показывает, что вы выбираете. Реальные результаты неверны. Между ними должно быть что-то не так. И даже если вы выберете дополнительный option из другого выпадающего списка select (Didaktické procesy -> Analyzovat i.e.), результаты будут перепутаны. - person mahish; 31.08.2013
comment
Да, ABCD не очень помог, мне нужно, чтобы все это было простыми английскими предложениями, чтобы знать. Я просто продолжаю видеть тарабарщину, которая не соответствует ярлыкам, понимаете? Я говорю только по-французски и по-английски ;) - person Dave Stein; 31.08.2013
comment
:) Я знаю, я изменил это только для визуального удобства :) Тогда я собираюсь изменить все это! - person mahish; 31.08.2013
comment
Мне кажется, это нормально ... это должно быть то, что вы выбираете в раскрывающемся списке «мульти» + «один из одного», верно? - person Dave Stein; 31.08.2013
comment
Или вы хотели, чтобы одно преобладало над другим? - person Dave Stein; 31.08.2013
comment
Посмотрите на этот gyazo.com/df19a1adeb695523bbaaf2c4e46bb44d, результат просто не соответствует выбранным параметрам. - person mahish; 31.08.2013
comment
Я хочу filter1 && filter2 && filter3. Теперь ведет себя больше как filter1 || filter2 || filter3... - person mahish; 31.08.2013
comment
О, это действительно простое изменение! - person Dave Stein; 31.08.2013
comment
Исправил дружище. Теперь он использует логику &&, а не ||. - person Dave Stein; 31.08.2013
comment
Большое спасибо за ваши усилия. Вы показали мне другой взгляд на мой код. Я буду придерживаться своего исходного кода. Единственное, что мне нужно сделать, это заменить запятые точками. - person mahish; 31.08.2013
comment
Ой. Не заметил ваш последний комментарий. Дайте мне ссылку, дайте мне проверить :) Эта моя рабочая версия кстати: jsfiddle.net/mahish/dum7n . Строка изменена: $(filter4Selector + filter5Selector.replace(/,/g, ".")).fadeIn("fast"); - person mahish; 31.08.2013
comment
Ok. Спасибо! Я также отредактирую свой оригинальный пост с моим решением. - person mahish; 31.08.2013
comment
Только не забудьте удалить consoles ;) - person Dave Stein; 31.08.2013

arrow_upward
0
arrow_downward

Разделяйте селекторы запятыми, и это должно работать (несколько селекторов Google jQuery для получения дополнительной информации)

person Sterling Archer    schedule 31.08.2013
comment
Вы указали мне правильное направление. Однако мне нужно было заменить запятые точками – 1041344/ . - person mahish; 31.08.2013