Question

我有一个div列表，就像这样：

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

共有3个菜单：ALL WORKS，Residential，Commercial。如果我点击住宅，那么所有＆＃34; portfolio-item＆＃34;旁边＆＃34; portfolio-cat-1＆＃34;将被隐藏。商业，所有div＆＃34;投资组合项目＆＃34;旁边＆＃34; portfolio-cat-2＆＃34;将被隐藏。

我为此使用.not（）。这是我的jquery代码：

create function dbo.birthdate_from_cpr(@cpr varchar(10))
returns date
as
begin
  declare @year char(2) = substring(@cpr, 5, 2),
          @month char(2) = substring(@cpr, 3, 2),
          @day char(2) = substring(@cpr, 1, 2),
          @century char(2)



  if right(datepart(yy, getdate()), 2) < @year
    set @century = left(datepart(yy, getdate()) - 100, 2)
  else
    set @century = left(datepart(yy, getdate()), 2)


  return convert(date, @century + @year + @month + @day, 120)
end
go

select dbo.birthdate_from_cpr('1312761234'),
       dbo.birthdate_from_cpr('0101041234'),
       age = datediff(yy, dbo.birthdate_from_cpr('1312761234'), getdate())

问题是，当我点击住宅（cat-1）时，所有投资组合-cat-1 div都被隐藏而不是投资组合-cat-2。什么地方出了错？我不应该使用.not（）吗？

任何帮助都将不胜感激。

Answer 1

＆＃13;

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

＆＃13;

<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>

＆＃13;

尝试使用选择器:not()

Answer 2

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

您需要使用fadeIn

恢复以前隐藏的元素

尝试以上一行

使用jquery从元素列表中隐藏不需要的元素

2 个答案: