Question

所以我试图过滤不同的类别，但我无法弄清楚如何在第二次点击时显示类别。 .not（设计）不允许我在过滤后重新设计（在第二次点击时）。我不想使用按钮来显示所有内容，而是只能打开和关闭按钮，类似于单选按钮。

我希望这对我说话有点困难。

.web-buttons li和up部分功能很棒

与JS FIDDLE的联系http://jsfiddle.net/mWran/1/

$（'。design-button'）。click（function（）{

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

}）;

$（'。branding-button'）。点击（function（）{

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

Answer 1

CSS类不匹配。

你有一个

.not('.design')

在您的JS代码中

，但HTML属性中的类名是

<li class="design-button even">

只需将.not() - 调用更改为

即可

.not('.design-button')

您也可以使用

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

作为选择器。

使用jquery切换和过滤类别

1 个答案: