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

我会从各种控件ids 中删除“触发器”，并添加一个“控件”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 demo.

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：

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


网页

插图

打印

标志

web logo

插图打印

插图标志

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