jQuery - クラスに基づいて異なるdivを表示して隠す

Question

こんにちはすべて 私は新しいウェブサイトのポートフォリオページを作成して、ポートフォリオアイテムをグリッドに表示しようとしています。その機能はシンプルなようですが、私はjQueryを釘付けにすることはできません。ここに私はそれが働くために必要な方法です。

1. デフォルトでは、すべてのアイテムが表示されます。
2. 特定のカテゴリボタンをクリックすると、それぞれのdivが表示され、残りの部分が非表示になります。
3. これらのdivには重複するクラスがあります（いくつかのアイテムは複数のカテゴリに適合します）。これらのdivは、それぞれのクラスボタンのいずれかがクリックされたときに表示される必要があります。ここで

は、私はそれを動作させるために使用しようとしたものである（それはかさばるようだが、私はjQueryのnoobのだ）：

---

 $(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 Sから 'トリガー' を削除し、与えることを 'コントロール' 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


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

は、デフォルトではそれらをすべて表示するには、

.item { display:block; } 

が続いてjqueryのそれらを表示するためにCSSを使用します。

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