Several conditions filter on javascript/jquery

Question

I am stuck with this problem. There is a simple filter and it works not exactly the way I need it: http://jsfiddle.net/qyy810xx/ CSS here:

.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;
}

HTML:

<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 categoryrko">BRko</div>
<div class="categoryb">B</div>
<div class="categoryb">B</div>

And script:

 $("#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"]();
   });
});

If select categoryB we can see ONLY divs with categoryB class, but i need to see all divs, including categoryB class. e.g. if you select categoryA it must display [A,B] block, all [A] blocks and [RKOa] block, but if you select categoryA AND categoryRKO it must show ONLY [RKOa] block. i.e. only a block that satisfies all parameters.

I will be glad to any help

gurvinder372 · Accepted Answer · 2017-11-29 08:10:48Z

1

You need not make a regular expression, just formulate a selector using the same logic

$("#filters :checkbox").click(function() {

   var selector = $("#filters :checkbox:checked").map(function() {
                          return "." + this.value;
                  }).get().join(",");
   $("div").hide().filter(selector).show(); //now show only those which are matching the selector chosen above
});

answered Nov 29, 2017 at 8:10

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Petr Voloshin Over a year ago

ty for feedback, but unfortunately i have no idea what to do with your advice

gurvinder372 Over a year ago

@PetrVoloshin Here is the updated fiddle with my changes jsfiddle.net/qyy810xx/1

Petr Voloshin Over a year ago

ty but it doesn't react if i choose only one checkbox and if i choose categoryA + categoryB it shows all divs, that have and categoryA or categoryB. Not only divs, that have both :c

gurvinder372 Over a year ago

@PetrVoloshin Check now jsfiddle.net/qyy810xx/2 You were binding a click inside the click event.

chiquyet · Accepted Answer · 2017-11-29 10:43:38Z

0

I know what you're trying to do. But be honest your code was really hard for other to read. So I decided to come up with a better solution and easy for everyone to know what I'm trying to do when they're reading code.

The idea is: Every times you check a checkbox.

You map through all checkboxes and push the value of checked checkbox into an array.
Then hide all div
And finally loop through an array and show the checked one.

Here is modified code of your's. :) Hope it can give you a idea.

    $(".filter-checkbox").click(function() {
			var checkboxes = $('.filter-checkbox');
      var checkedClasses = [];
      //Map and get all checked category
      var activeCheckboxes = checkboxes.each(function(index,checkbox){
      	if(checkbox.checked)
        	checkedClasses.push(checkbox.value);
      });
      //Hide all category
      $('.category').hide();
      //Show only checked
      $.each(checkedClasses,function(index,className){
      	$('.' + className).show();
      })
    });

.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 class="filter-checkbox" type="checkbox" value="categorya" id="filter-categorya" />
        <label for="filter-categorya">Category A</label>
    </li>
    <li>
        <input class="filter-checkbox" type="checkbox" value="categoryb" id="filter-categoryb" />
        <label for="filter-categoryb">Category B</label>
    </li>
    <li>
        <input class="filter-checkbox" type="checkbox" value="categoryrko" id="filter-categoryrko" />
        <label for="filter-categoryrko">RKO</label>
    </li>
</ul>

<div class="category categorya categoryb">A, B</div>
<div class="category categorya">A</div>
<div class="category categorya">A</div>
<div class="category categorya">A</div>
<div class="category categoryrko">RKO</div>
<div class="category categoryb">B</div>
<div class="category categoryb">B</div>
<div class="category categoryb">B</div>

<br />
<p class="info">
    - If you select Category A: four boxes will apear [A,B] [A] [A] [A]
    <br/><br/>
    - Then if you select Category B and deselect it again: the purple box [A,B] will disapear because the script commands to hide 'B'.
    <br/><br/>
    - But I don't want the script to hide box 'B' when it also contains 'A'..
</p>

answered Nov 29, 2017 at 10:43

chiquyet

5274 silver badges14 bronze badges

4 Comments

Petr Voloshin Over a year ago

ty for edits! Seems like i got what you mean, but unfortunately can't make it working :)

chiquyet Over a year ago

I make it working on codepen. You can check it out: codepen.io/cqpro/pen/JOmxma

Petr Voloshin Over a year ago

yeah, now i can see it working, ty! but there is one problem - when i choose 2 checkboxes, filter showing me blocks, that have one of choosec classes, but i need to see only one block, witch contains both classes :(

chiquyet Over a year ago

Ohhh. I got what you mean. When you select A and B. The result will be block A,B show. I was edit my codepen as your requirement. Could you pls check it. If it's ok. I will edit my answer as well. :D

Collectives™ on Stack Overflow

Several conditions filter on javascript/jquery

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related