切換和過濾器類別使用jquery

所以我想過濾不同的類別，但我無法計算如何讓類別顯示在第二次點擊。 .not（設計）不允許我在設計（第二次點擊）後將其設計過濾。我不想使用一個按鈕來顯示所有，id而只是能夠切換按鈕開關類似於單選按鈕。切換和過濾器類別使用jquery

我希望這是有道理的，對我來說這是有點困難的話。

名.web-按鈕Li和該功能的工作很大一部分

鏈接到JS FIDDLE http://jsfiddle.net/mWran/1/

$（ '設計按鈕'）。點擊（函數（）{

$('.web-buttons li').not(this).removeClass('up') 
$(this).toggleClass("up") 
$('#webul li').removeClass('clicked') 
$('#webul li').not('.design').toggleClass('clicked')

}）; 。

$（ '品牌鍵'）點擊（函數（）{

$('.web-buttons li').not(this).removeClass('up') 
$(this).toggleClass("up") 
$('#webul li').removeClass('clicked') 
$('#webul li').not('.branding').toggleClass('clicked')

}）;

<div id="web-design-content"> 
     <ul id="webul"> 


      <li class="view view-first coding design branding drupal"> 
      <img src="images/epic-electro.jpg" width="297" height="203" /> 
      <div class="mask"> 
        <h2 class="bebas">Epic Electro Music Blog</h2> 
        <p>Introducing Epic Electro: an electronic music blog showcasing electronic dance music from around the world</p> 

        <a class="fancybox fancybox.iframe info ostrich" href="epicelectro.html">Read More</a> 
       </div>  
      </li> 

      <li class="view view-first coding branding"> 
      <img src="images/soul-of-athens.jpg" width="297" height="203" /> 
      <div class="mask"> 
        <h2 class="bebas">2012 Soul Of Athens</h2> 
        <p>Ohio University multimedia sequence class of 2012 presents Swing State: Ohio's role in the outcome of the presidential election</p> 
        <a class="fancybox fancybox.iframe info ostrich" href="soa.html">Read More</a> 
       </div>  
      </li> 




     </ul> 



    </div><!-- Endb Web Design content -->

來源

2012-10-17 Vincent W Profeta

歡迎使用stackoverflow。我建議創建一個http://jsfiddle.net/工作示例供大家測試。 –

在這裏謝謝你是一個js小提琴！ http://jsfiddle.net/mWran/1/ –

的CSS類不匹配。

你有

.not('.design')

在你的JS代碼

，但在HTML屬性的類名是

<li class="design-button even">

只是改變.not() -calls到

.not('.design-button')

你也可以使用

$('#webul li:not(.design-button)').toggleClass('clicked');

作爲選擇器。

來源

2012-10-17 18:33:00 feeela

感謝feela，但我不想隱藏.design-button。 .design-button是觸發下面隱藏不同列表項的按鈕。如果我將它更改爲.not（'。design-button'），則隱藏所有框。我希望能夠擊中.design-button並且對項目進行過濾。我無法弄清楚的是如何再次擊中.design-button並且所有項目都會回來。 http://jsfiddle.net/mWran/1/ –

切換和過濾器類別使用jquery

回答

相關問題