0

Доброго времени суток, сообщество! Есть вот такой вот фильтр: 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>

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

1 ответ 1

0

Самое простое решение - замена 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"]();
   });
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.