WordPress的：瞭解基於JavaScript的後過濾器

Question

我已經被分配繼續工作的WP主題別人已經建立，我仍然遇到一些問題，對於Wordpress來說很新。

我相信，在我之前從事這項工作的人之一是在頁面頂部設置了按鈕，允許根據各自的類別對顯示的帖子進行排序或限制。這正是用戶應該能夠做到的，但它還沒有工作，而且我無法理解如何使用我的前同事爲此編寫的代碼。這是該網站帖子的顯示標記，在底部的腳本是什麼，我認爲是應該允許的帖子過濾：

<?php get_header(); ?> 
</div> 
<br> 
<div class="wrapper-offset-fix wrapper-projekte"> 
<div class="projekte"> 

    <div class="button-group filters-button-group"> 
     <button class="active btn" id="all">alle</button> 
     <button class="projekt-btn" id="category-wise-201516">WiSe15/16</button> 
     <button class="projekt-btn" id="category-sose-15">SoSe15</button> 
     <button class="projekt-btn" id="category-wise-201415">WiSe14/15</button> 
     <button class="projekt-btn" id="category-sose-14">SoSe14</button> 
    </div> 


    <?php if (is_home()) { 
    query_posts("cat=-3"); 
    } ?> 

    <?php if (have_posts()): ?> 
     <?php while(have_posts()): the_post(); ?> 
     <div <?php post_class(); ?>> 

      <p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p> 
      <a href="<?php the_permalink(); ?>"> 
      <?php 
       if (has_post_thumbnail()) { 
       the_post_thumbnail('large'); 
      } ?> 
      </a> 
     <!--<div class="meta">Tags: <?php the_tags('', ', ', '<br />'); ?> </div>--> 
     </div> 
     <?php endwhile; ?> 
    <?php else : ?> 
     <h2>Couldn’t find any articles!</h2> 
    <?php endif; ?> 
</div> 

<script> 
    var $btns = $('.btn').click(function() { 

     if (this.id == 'all') { 
     $('.projekte > .post').fadeIn(600); 
     } else { 
     var $el = $('.' + this.id).fadeIn(600); 
     $('.projekte > .post').not($el).hide(); 
     } 
     $btns.removeClass('active'); 
     $(this).addClass('active'); 
    }) 
</script> 

<?php get_footer(); ?> 

這是令人難以置信的有益的，如果有人可以解釋這對我和也幫助我實現它的工作。我絕對是WP，PHP和JS的新手，但真的很想掌握它。當然，讓網站正常工作。

編輯

下面是在頁面的底部，作爲一個單獨的一段代碼的JavaScript：

<script> 
    var $btns = $('.btn').click(function() { 

     if (this.id == 'all') { 
     $('.projekte > .post').fadeIn(600); 
     } else { 
     var $el = $('.' + this.id).fadeIn(600); 
     $('.projekte > .post').not($el).hide(); 
     } 
     $btns.removeClass('active'); 
     $(this).addClass('active'); 
    }) 
</script> 

據我可以告訴有鏈接到頁面沒有任何其他JS或關於過濾器按鈕執行。這裏還有一個鏈接到當前版本的網站，其中代碼發佈在我的問題取自：http://udkdev.skopec.de/category/projekte/

Answer 1

實際上，JavaScript綁定類「btn」的元素上的點擊事件，但只有你的「所有」按鈕有那個班。所以它看起來好像什麼都不做。

請更改按鈕類別或點擊目標。