Question

我有一个页面，其中包含不同的奖项，分为4个类别。页面加载后，第一个类别将获得“活动”类别，我需要在那时显示相应的奖项。

当我单击类别之一时，该代码有效，但是在页面加载时，没有任何奖品显示。有没有办法检测哪个类别具有“活跃”类别并显示正确的奖项？

这是页面：https://staging.mytimo.be/prijzen/

jQuery

var $prijzenArchief = !!$('.post-type-archive-prijzen')[0];
    if ($prijzenArchief) {
        $('.prijzen__filter ul li:first').addClass('active');
        var tid = $(this).data('type-trigger');
        var $current = $('.prijzen__items article[data-type="' + tid + '"]').toggle();
        $('.prijzen__items article').not($current).hide();

        //click handler
        $('.prijzen__filter ul .filter-item').click(function() {
            $('.prijzen__filter ul .filter-item').removeClass('active');
            $(this).addClass('active');
            var tid = $(this).data('type-trigger');
            var $current = $('.prijzen__items article[data-type="' + tid + '"]').toggle();
            $('.prijzen__items article').not($current).hide();
        })
    }

PHP

<div class="prijzen__filter">
    <?php
    $taxonomies = get_terms( array(
        'taxonomy' => 'type',
        'hide_empty' => false,
        'order' => 'DESC',
        'orderby' =>'date'
    ) );

    if ( !empty($taxonomies) ) :
        $output = '<ul>';
        foreach( $taxonomies as $category ) {
            if( $category->parent == 0 ) {
                $output.= '<li class="filter-item" data-type-trigger="'. esc_attr( $category->slug ) .'">';
                $output.= esc_attr( $category->name );
                $output.='</li>';
            }
        }
        $output.='</ul>';
        echo $output;
    endif;
    ?>
</div>
<div class="prijzen__items">
    <?php
    while ( have_posts() ) {
        the_post(); ?>
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> data-type="<?php $terms = get_the_terms( $queried_post , 'type' );
            foreach ( $terms as $term ) { ?><?php echo $term->slug; ?><?php } ?>">
            <header class="entry-header">
                <?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>
            </header>
        </article>
    <?php } ?>
</div>

Answer 1

您可以在活动项目上触发点击事件。

$('.prijzen__filter ul .filter-item.active').trigger('click');

在您的$(document).ready(...);调用中进行此操作，但在添加活动类并附加click事件处理程序之后。

通过jQuery显示活动类别的帖子

1 个答案: