隱藏使用jQuery

-1

元素列表不需要的元素我有格的列表，就像這樣：隱藏使用jQuery

<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」旁邊的所有「組合項目」將被隱藏。 Commercial也是如此，除了「portfolio-cat-2」之外的所有div「投資組合項目」都將隱藏起來。

我使用.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。什麼地方出了錯？是不是我不應該使用？

任何幫助，將不勝感激。

來源

2017-02-17 Henry Gunawan

$(".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()

來源

2017-02-17 09:30:18 guradio

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

你需要使用淡入

帶回以前隱藏的元素

試試上面的線

來源

2017-02-17 09:31:24

隱藏使用jQuery

回答

相關問題