javascript - 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 中删除“触发器”，并添加一个“控件”类 以提供:

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