隐藏使用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

回答

相关问题