Javascript jQuery-Show和Hid div'；根据班级的不同，有不同的标准

大家好， 我正在尝试为我的新网站制作一个公文包页面，在网格中显示公文包项目。它的功能似乎很简单，但我似乎无法确定jQuery。以下是我需要它的工作方式

默认情况下，我希望显示所有项目

在特定的分类按钮上，单击我希望它显示相应的div并隐藏其余部分

这些div有重叠的类（一些项可以归入多个类别）。单击相应的类按钮时，应显示这些div

下面是我试图使用的工具（它看起来很笨重，但我是一个jquerynoob）：

---

网状物
插图
打印
标志
网络标志
插图印刷
插图标志

---

任何帮助都将不胜感激。 谢谢

试试看

$('#webtrigger').click(function(){
     var shown = $('.web').show('fast').get();
     $('#wrapper > item').not(shown).hide('fast');
     return false;
});

---

它将显示的控件存储在变量中，然后用于将它们从隐藏的控件中排除。

我将从各种控件

id

s中删除“触发器”，并添加一个“控件”

类

，以给出：

<a href="#" id="showall">show all</a><br/>
<a href="#" id="web" class="control">web</a><br/>
<a href="#" id="illustration" class="control">illustration</a><br/>
<a href="#" id="print" class="control">print</a><br/>
<a href="#" id="logo" class="control">logo</a><br />

---

.

我会做这样的东西：

$('#webtrigger').click(function(){
         $(".item").hide();
         $('.web').show('fast');
        });

立即隐藏所有项目，然后用动画显示感兴趣的div。

---

当然，你所有的触发器都是一样的。

当你必须挑选这些项目时，类似的方法应该会起作用：

funciton tagClicked(e)
{
     var ClassName=$(this).text();
if(ClassName="show all")
{

}
else
{

$.each($('.item'), function(idx,value)
        { 
        if(value.hasClass(ClassName))
        {value.show();}
        else{ value.hide();}
        };
}
}

jQuery：

$（文档）.ready（函数（）{

}))；

HTML:

全部显示

网络

插图

打印

徽标


网状物
插图
打印
标志
网络标志
插图印刷
插图标志

我会做一个技巧，使用链接的id来触发内容的类别：

 <a href="#" class="showall">show all</a><br/>
    <a href="#" class="trigger" id="web">web</a><br/>
    <a href="#" class="trigger" id="illustration">illustration</a><br/>
    <a href="#" class="trigger" id="print">print</a><br/>
    <a href="#" class="trigger" id="logo">logo</a><br />

    <div id="wrapper">
        <div class="item web">web</div>
        <div class="item illustration">illustration</div>
        <div class="item print">print</div>
        <div class="item logo">logo</div>
        <div class="item web logo">web logo</div>
        <div class="item print illustration ">illustration print</div>
        <div class="item illustration logo">illustration logo</div>
    </div>

然后使用jquery显示它们：

 $(document).ready(function(){
   $(".showall").click(function(){$(".item").fadeIn(300);});
   $(".trigger").click(function(){
     var contentToDisplay = $("."+this.id);
     if (contentToDisplay.is(":visible")) return;
     $(".item").fadeOut(300); // I prefer this to hide effect
     contentToDisplay.fadeIn(500);
   });
 });

---

苏，怎么了？代码对我来说似乎没问题。首先，非常感谢你的回复！我喜欢这个解决方案，因为它可以扩展到所有不同的触发器。我只需要稍微调整一下，它不会显示具体的分类，直到我隐藏所有的项目。默认情况下，我希望页面显示所有项目。。我怎样才能修改它来做到这一点？另外，它也有一点问题，它不会在我每次点击时触发。下面是一个工作示例：对，这实际上会更好：$（“.item”）.stop（）.fadeOut（300，function（）{contentToDisplay.fadeIn（500）；}）感谢您的回复！这是一个简单而有效的解决方案，是否有任何方法可以扩展到所有元素而不必写出所有代码？这就是问题所在！简单而甜蜜。非常感谢！

funciton tagClicked(e)
{
     var ClassName=$(this).text();
if(ClassName="show all")
{

}
else
{

$.each($('.item'), function(idx,value)
        { 
        if(value.hasClass(ClassName))
        {value.show();}
        else{ value.hide();}
        };
}
}

$('#showall').click(function()
{

    $(".item").show("fast");
    return false;

})

$('.trigger').click(function()
{

    var triggerType = $(this).attr("id");

    $(".item").hide("fast");

    $('.'+triggerType).show('fast');

    return false;

});

 <a href="#" class="showall">show all</a><br/>
    <a href="#" class="trigger" id="web">web</a><br/>
    <a href="#" class="trigger" id="illustration">illustration</a><br/>
    <a href="#" class="trigger" id="print">print</a><br/>
    <a href="#" class="trigger" id="logo">logo</a><br />

    <div id="wrapper">
        <div class="item web">web</div>
        <div class="item illustration">illustration</div>
        <div class="item print">print</div>
        <div class="item logo">logo</div>
        <div class="item web logo">web logo</div>
        <div class="item print illustration ">illustration print</div>
        <div class="item illustration logo">illustration logo</div>
    </div>

.item { display:block; }

 $(document).ready(function(){
   $(".showall").click(function(){$(".item").fadeIn(300);});
   $(".trigger").click(function(){
     var contentToDisplay = $("."+this.id);
     if (contentToDisplay.is(":visible")) return;
     $(".item").fadeOut(300); // I prefer this to hide effect
     contentToDisplay.fadeIn(500);
   });
 });