0

そのため、さまざまなカテゴリをフィルタリングしようとしていますが、2 回目のクリックでカテゴリを表示する方法がわかりません。.not(design) では、フィルター処理後に (2 回目のクリックで) デザインを元に戻すことができません。ボタンを使用してすべてを表示するのではなく、ラジオボタンのようにボタンのオンとオフを切り替えるだけでよいのです。

言葉にするのが少し難しいので、これが理にかなっていることを願っています。

.web-buttons li と機能の一部がうまく機能します

JS FIDDLE へのリンクhttp://jsfiddle.net/mWran/1/

$('.design-button').click(関数 () {

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

});

$('.branding-button').click(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 -->

4

1 に答える 1

0

CSSクラスが一致していません。

あなたが持っている

.not('.design')

JSコードでは、HTML属性のクラス名は

<li class="design-button even">

.not()-callsをに変更するだけです

.not('.design-button')

あなたも使うことができます

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

セレクターとして。

于 2012-10-17T18:33:00.850 に答える