I'm trying to filter divs 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 & 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");
});
});
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 & 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 & 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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments