Question

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

默认情况下，我希望显示所有项目。
在特定的类别按钮上单击，我希望它显示相应的div并隐藏其余部分。
这些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 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;

});

$('#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

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

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

6 个答案: