terf terf - 4 months ago 27
Javascript Question

jQuery Filter divs By Class

I'm trying to filter

div
s by their class, but I'm having some trouble. For some reason, if any button is pressed, everything disappears. I've been troubleshooting this for a while now and I can't figure out why this is happening. A CodePen is here and my attempt is below:

HTML:

<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Show A</button>
<button class="btn" id="b">Show B</button>
<button class="btn" id="c">Show C</button>
<button class="btn" id="d">Show D</button>
<br />
<div class="a b">a &amp; b</div>
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>


CSS:

div {
background: #eee;
height: 100px;
width: calc(25% - 10px);
float: left;
margin: 5px;
text-align: center;
}
.active {
color: red;
}


jQuery:

$( document ).ready(function() {

$("#all").click(function() {
$("div").fadeIn(500);
$("#all").addClass("active");
$(":not(#all)").removeClass("active");
});
$("#a").click(function() {
$(".a").fadeIn(500);
$(":not(.a)").fadeOut(0);
$("#a").addClass("active");
$(":not(#a)").removeClass("active");
});
$("#b").click(function() {
$(".b").fadeIn(500);
$(":not(.b)").fadeOut(0);
$("#b").addClass("active");
$(":not(#b)").removeClass("active");
});
$("#c").click(function() {
$(".c").fadeIn(500);
$(":not(.c)").fadeOut(0);
$("#c").addClass("active");
$(":not(#c)").removeClass("active");
});
$("#d").click(function() {
$(".d").fadeIn(500);
$(":not(.d)").fadeOut(0);
$("#d").addClass("active");
$(":not(#d)").removeClass("active");
});

});

Answer

It is because of the selector $(":not(.b)") which selects all elements and hides it except .b which will include the body element also.

You need to use a more specific selector, one option is to use a container element like

var $btns = $('.btn').click(function() {
  if (this.id == 'all') {
    $('#ct > div').show();
  } else {
    var $el = $('.' + this.id).show();
    $('#ct > div').not($el).hide();
  }
  $btns.removeClass('active');
  $(this).addClass('active');
})
.active {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Show A</button>
<button class="btn" id="b">Show B</button>
<button class="btn" id="c">Show C</button>
<button class="btn" id="d">Show D</button>
<br />
<div id="ct">
  <div class="a b">a &amp; b</div>
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
</div>


Using a common selector like an element selector div also may not work as it could target other non related elements, so another option is to use a common class to all elements that need to be targeted.

var $items = $('.item');
var $btns = $('.btn').click(function() {
  if (this.id == 'all') {
    $items.show();
  } else {
    var $el = $('.' + this.id).show();
    $items.not($el).hide();
  }
  $btns.removeClass('active');
  $(this).addClass('active');
})
.active {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Show A</button>
<button class="btn" id="b">Show B</button>
<button class="btn" id="c">Show C</button>
<button class="btn" id="d">Show D</button>
<br />
<div class="item a b">a &amp; b</div>
<div class="item a">a</div>
<div class="item b">b</div>
<div class="item c">c</div>
<div class="item d">d</div>

Note: Also as you can see, there is no need to write separate click handlers for each button - given that the id of the button and the class you are looking for is the same.