jQuery - 根据类显示和隐藏不同的 div

Question

嘿大家， 我正在尝试为我的新网站制作一个投资组合页面，该页面将在网格中显示投资组合项目。它的功能看起来很简单，但我似乎无法确定 jQuery。这就是我需要它工作的方式。

1. 默认情况下，我希望显示所有项目。
2. 在特定类别按钮上单击我希望它显示相应的 div 并隐藏其余部分。
3. 这些 div 具有重叠的类（某些项目适合多个类别）。当单击它们各自的类按钮时，应该显示这些 div。

这是我试图用来让它工作的东西（它看起来很笨重，但我是一个 jQuery 菜鸟）：

---

        $(document).ready(function(){
        $('#showall').click(function(){ 
            $(".item").show("fast");
        })

        $('#webtrigger').click(function(){
             if ($('.web').is(':visible')) {
                 $('.web').show('fast');
                    } else {
                 $('.illustration.print.logo').hide('fast');
             }
         return false;
            })

        $('#logotrigger').click(function(){
             if ($(".logo").is(":visible")) {
                 $(".logo").show("fast");
                    } else {
                 $(".illustration.print.web").hide("fast");
             }
         return false;
            })
     });

    <a href="#" id="showall">show all</a><br/>
    <a href="#" id="webtrigger">web</a><br/>
    <a href="#" id="illustrationtrigger">illustration</a><br/>
    <a href="#" id="printtrigger">print</a><br/>
    <a href="#" id="logotrigger">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>

---

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

Answer 1

我将从各种控件 id 中删除“触发器”，并添加一个“控件”class 来给出：

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

然后使用 jQuery：

$('a.control').click(
function(){
   var show = this.id;
    $('#wrapper > div.' + show).show();
    $('#wrapper > div:not(".'+show+'")').hide();
    return false;
});

JS Fiddle 演示。

Answer 2

试一试。

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

它将您在变量中显示的内容存储起来，然后使用 not()^(docs) 将它们从隐藏的内容中排除。

Answer 3

我会做这样的事情：

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

您立即隐藏所有项目，然后用动画显示您感兴趣的 div。
当然，对于您拥有的所有触发器来说都是相同的。

Answer 4

当您必须挑选项目时，类似这样的事情应该起作用：

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

Answer 5

jQuery：

<代码>
$(document).ready(function(){

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

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

})

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

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

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

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

    return false;

});

});


HTML：

<代码>
显示全部
web
插图
打印
logo

;

web

;

插图

打印

;

徽标

;

网页徽标

;

插图打印

插图徽标

<代码>

Answer 6

我会做一个技巧，使用链接的 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>

要默认显示所有内容，请使用 css

.item { display:block; }

然后使用 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);
   });
 });