Ajax基本过滤器-显示帖子

Question

我尝试遵循有关Ajax过滤器的教程，但似乎无法使用我尝试的任何东西。

我正在使用页面上的ajax过滤器，并且只会根据分配给单个帖子的过滤器类别显示产品。目前，ajax尚未过滤任何内容。

博客页面代码：

<div class="white-strip">
<div class="container">
    <div class="our-magic-ajax-powered-posts-filter">

        <?php $categories = get_categories(); ?>
        <?php if( ! empty( $categories ) ) : ?>
            <ul class="filter">
                <li class="cat-item cat-item-all current" data-cat-id=""><span class="control"><?php echo esc_html( 'All', 'kilo' ); ?></span></li>
                <?php foreach( $categories as $category ) : ?>
                    <li class="cat-item cat-item-<?php echo esc_html( $category->term_id ); ?>" data-cat-id="<?php echo esc_html( $category->term_id ); ?>" ><span class="control"><?php echo esc_html( $category->name ); ?></span></li>
                <?php endforeach; wp_reset_postdata(); ?>
            </ul>
        <?php endif; ?>

        <?php $popular_posts = get_posts( array(
            'post_type' => array( 'post' ),
            'posts_per_page' => 1,
            'orderby' => 'date'
        ) ); ?>

        <?php if( ! empty( $popular_posts ) ) : ?>
        <div class="grid">
            <?php foreach( $popular_posts as $post ) : setup_postdata( $post ); ?>
                <article class="grid-item col-sm-4">
                    <a href="<?php the_permalink(); ?>">
                        <?php the_post_thumbnail('full'); ?>
                        <span class="grid-span"><?php echo get_the_title(); ?> </span>
                    </a>
                </article>
            <?php endforeach; wp_reset_postdata(); ?>
        </div>
        <?php endif; ?>

    </div>
</div>

功能代码：

add_action( 'wp_ajax_nopriv_kilo_posts_filter', 'kilo_posts_filter' );
add_action( 'wp_ajax_kilo_posts_filter', 'kilo_posts_filter' );

function kilo_posts_filter() {

global $post;

ob_start();

$popular_posts = get_posts( array(

    'post_type' => array( 'post' ),
    'posts_per_page' => 4,
    'category' => json_encode( $_POST['id'] ),
    'orderby' => 'date'

) );

// Start the loop
foreach( $popular_posts as $post ) : setup_postdata( $post ); ?>

    <article class="grid-item">
        <span><?php echo get_the_title(); ?></span>
    </article>

<?php endforeach; wp_reset_postdata();

$output = ob_get_contents();
ob_end_clean();

echo json_encode( $output );

die();

js文件：

function kilo_ajaxPostsFilter() {
var container = $('.our-magic-ajax-powered-posts-filter');
container.each(function () {
    var filter = $(this).find('.filter').find('span.control');
    filter.on('click', function (e) {
        var cat_link = $(this).parent().attr('data-cat-id');
        if (typeof cat_link !== typeof undefined && cat_link !== false) {
            #                e.preventDefault();
            var id = $(this).parent().attr('data-cat-id');
            var grid = container.find('.grid');
            $.ajax({
                url: kilo_js_vars.ajaxurl,
                data: {
                    action: 'kilo_posts_filter',
                    id: id
                },
                dataType: 'json',
                type: 'POST',
                nonce: kilo_js_vars.nonce,
                success: function (response) {
                    grid.html(response);
                },
                error: function (response) {
                    grid.html(response);
                },
                cache: false
            });
            $(this).parent().siblings().removeClass('current');
            $(this).parent().addClass('current');
        }
        e.preventDefault();
    });
});
}

kilo_ajaxPostsFilter();