Флажки фильтра jQuery для отображения / скрытия элементов

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

У меня есть приведенный ниже код, который фильтрует элементы, скрывая их в jQuery, используя стили для элементов. Смотрите мой JSFiddle (https://jsfiddle.net/vy41zwch/4 /).

Моя проблема в том, что мне нужно, чтобы он показывал только те элементы, которые имеют ВСЕ проверенные фильтры, перечисленные в стилях, и не отображал НИ ОДИН из проверенных элементов.

Например, если я выберу «красный» и «Пальто», должно отображаться только ПОЛЕ A, поскольку оно содержит оба фильтра. Вместо этого он показывает флажки A и B.

  //filter files list
    function filterFilesList() {
        var rows = $('.file-row');  
        var checked = $("#filterControls :checkbox:checked");
        if(checked.length){
            rows.hide(200);
            checked.each(function(){
                $("."   $(this).val()).show(200);
            });
        } else {
            rows.show();
        }
    }

    $("#filterControls :checkbox").click(filterFilesList);
    filterFilesList();
  

Ответ №1:

Вам нужно создать селектор, который представляет собой комбинацию всех фильтров

 var selector = checked.map(function() {
    return "."   $(this).val()
}).get().join('');
$(selector).show(200);
  

Скрипка

Комментарии:

1. Да, это выглядит точно так, как я искал, спасибо