隐藏不是特定类别的元素

Question

I want to hide an element which is not a certain class via jQuerys not() :

 <a href="#" id="c_1" class="content-btn">Content 1</a>
 <a href="#" id="c_2" class="content-btn">Content 2</a>

 <div class="post-item c_1"></div>
 <div class="post-item c_2"></div> 

and

var thisContent;
jQuery('.content-btn').click(function() {
    thisContent = this.id;
    jQuery('.post_item').not('.'+thisContent).fadeOut();
}

am I using .not() method wrong in this context, because it seems not to work!

Answer 1

Your selector needs to be

jQuery('.post-item')

And you need to close the ) at the end of your jQuery, like this:

var thisContent;
jQuery('.content-btn').click(function() {
    thisContent = this.id;
    jQuery('.post-item').not('.'+thisContent).fadeOut();
});

See http://codepen.io/anon/pen/EaNXjg for a working example.

Answer 2

尝试使用

$(element).hasClass(".clasname").fadeOut();

Answer 3

as @AND Finally noticed modify your selector .. and while you use click on Anchor you need to use e.preventDefault; try this

jQuery('.content-btn').click(function(e) {
    e.preventDefault;
    thisContent = this.id;
    jQuery('.post-item').not('.'+thisContent).fadeOut();
    $('.'+thisContent).fadeIn();
});

DEMO