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

要默認顯示所有這些，使用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); 
    }); 
});