非表示jqueryの

Question

を使用して要素のリストから不要な要素私はちょうどこのようなdiv要素のリストを持っている：ALL WORKS、住宅、商業：

<div class="portfolio-categories"> 
    <ul> 
     <li><a href="#" id="cat-all" class="active">ALL WORKS</a></li> 
     <li><a href="#" id="cat-1">Residential</a></li> 
     <li><a href="#" id="cat-2">Commercial</a></li> 
    </ul> 
    <div class="clear"></div> 
</div> 

<div class="portfolio-container"> 
    <div class="portfolio-item portfolio-cat-1">1</div> 
    <div class="portfolio-item portfolio-cat-1">2</div> 
    <div class="portfolio-item portfolio-cat-1">3</div> 
    <div class="portfolio-item portfolio-cat-2">4</div> 
    <div class="portfolio-item portfolio-cat-2">5</div> 
</div> 

3つのメニューがあります。住宅をクリックすると、 "portfolio-cat-1"の横にある "portfolio-item"がすべて非表示になります。コマーシャルの場合も同じですが、 "portfolio-cat-2"の横のすべてのdiv "portfolio-item"は表示されません。

私はこのために.not（）を使用しています。ここに私のjqueryのコードは次のとおりです。

$(".portfolio-categories a").click(function(e){ 
    e.preventDefault(); 

    var id=$(this).attr("id").split("-")[1]; 

    $(".portfolio-item").not(".portfolio-cat-"+id).fadeOut(400, function(){ 
     alert("done"); 
    }); 
}); 

問題は、私は住宅（CAT-1）をクリックすると、すべてのポートフォリオ-CAT-1のdivを代わりにポートフォリオ-CAT-2の隠されている、です。何が悪かったのか？それは私が使うはずのものではないのですか？

ご協力いただければ幸いです。

Answer 1

$(".portfolio-categories a").click(function(e){ 
 
    e.preventDefault(); 
 

 
    var id=$(this).attr("id").split("-")[1]; 
 
    console.log(id) 
 
    $(".portfolio-item:not(.portfolio-cat-"+id+")").fadeOut(400, function(){ 
 
     console.log("done"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="portfolio-categories"> 
 
    <ul> 
 
     <li><a href="#" id="cat-all" class="active">ALL WORKS</a></li> 
 
     <li><a href="#" id="cat-1">Residential</a></li> 
 
     <li><a href="#" id="cat-2">Commercial</a></li> 
 
    </ul> 
 
    <div class="clear"></div> 
 
</div> 
 

 
<div class="portfolio-container"> 
 
    <div class="portfolio-item portfolio-cat-1">1</div> 
 
    <div class="portfolio-item portfolio-cat-1">2</div> 
 
    <div class="portfolio-item portfolio-cat-1">3</div> 
 
    <div class="portfolio-item portfolio-cat-2">4</div> 
 
    <div class="portfolio-item portfolio-cat-2">5</div> 
 
</div>

あなたがフェードイン

を使用して、以前に隠された要素を戻すために必要なセレクタに:not()

Answer 2

$(".portfolio-item").fadeIn(400).not(".portfolio-cat-"+id).fadeOut(400); 

を使用してみてください

上記の行を試してみてください