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 将 click 事件绑定到具有“btn”类的元素上，但只有您的“all”按钮具有该类。所以它看起来好像什么都不做。

要么改变按钮类，要么改变点击目标。