Фильтр с разделением результатов на jquery/js

168

30 ноября 2017, 03:43

Доброго времени суток, сообщество! Есть вот такой вот фильтр: http://jsfiddle.net/xvs9jL1c/
Но, к сожалению, не совсем устраивает своим функционалом и у меня нет идей, как его реализовать.

Сейчас, если выбрать два параметра, фильтр отображает блоки, в которых есть хотя бы один из выбранных параметров. А надо чтобы при выборе двух параметров отображались только блоки, удовлетворяющие обоим. При выборе трех - отображались те блоки, у которых есть все три параметра и т.д.
Но так же важно и то, что при выборе только одного параметра, должны отображаться все блоки, которые его имеют.
Вот код:

    $("#filters :checkbox").click(function() { 
     
       var re = new RegExp($("#filters :checkbox:checked").map(function() { 
                              return this.value; 
                           }).get().join("|") ); 
       $("div").each(function() { 
          var $this = $(this); 
          $this[re.source!="" && re.test($this.attr("class")) ? "show" : "hide"](); 
       }); 
    });

.categorya, .categoryb, .categoryrko { 
         
        width: 30px; 
        height: 20px; 
        line-height:20px; 
        text-align:center; 
        background: red; 
        margin: 10px; 
        float: left; 
        font-size:11px; 
        color:white; 
        font-family:sans-serif; 
    } 
     
    .categoryb { 
        background: blue; 
    } 
     
    .categorya.categoryb{ 
        background:purple; 
    } 
    p.info{ 
        padding:30px 20px 0 20px; 
        color:#666; 
        font-family:sans-serif; 
        font-size:13px; 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul id="filters"> 
        <li> 
            <input type="checkbox" value="categorya" id="filter-categorya" /> 
            <label for="filter-categorya">Category A</label> 
        </li> 
        <li> 
            <input type="checkbox" value="categoryb" id="filter-categoryb" /> 
            <label for="filter-categoryb">Category B</label> 
        </li> 
        <li> 
            <input type="checkbox" value="categoryrko" id="filter-categoryrko" /> 
            <label for="filter-categoryrko">RKO</label> 
        </li> 
    </ul> 
     
    <div class="categorya categoryb">A, B</div> 
    <div class="categorya">A</div> 
    <div class="categorya">A</div> 
    <div class="categorya">A</div> 
    <div class="categoryrko">RKO</div> 
    <div class="categoryb">B</div> 
    <div class="categoryb">B</div> 
    <div class="categoryb">B</div>

Буду рад помощи!

Answer 1

Самое простое решение - замена join("|") на join(" "). Но будет чувствительно к порядку в котором объявлены классы

http://jsfiddle.net/LceLpr1f/

    $("#filters :checkbox").click(function() {
   var re = new RegExp($("#filters :checkbox:checked").map(function() {
                          return this.value;
                       }).get().join(" ") );
   $("div").each(function() {
      var $this = $(this);
      $this[re.source!="" && re.test($this.attr("class")) ? "show" : "hide"]();
   });
});

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Обратный отсчёт времени на javascript

Мне надо сделать таймер обратного отсчета до 31 декабряБолее менее понимаю, каковым должен быть алгоритм:

204

javascript

Телефонная книга js

Необходимо реализовать функцию, через которую можно будет управлять телефонной книгойНужно реулизовать всего 3 команды: ADD(добавляет контакт,...

1116

PHP

Двойная авторизация на soap сервере

Не получается авторизоваться на сервере soap, я новичок в этомВ документации к апи написано, что там двойная авторизация

248

PHP

Почему появляется ошибка

Мне необходимо с помощью php выдавать дату завтрашнего дня в формате yyyy-mm-dd я погуглил и нашел вот это выражение <?php $tomorrow = mktime(0, 0, 0, date("m") , date("d")+1,...

289