如何使用 ajax 加载更多徽标？

Question

我找到了一个解决方案，如何让加载更多按钮在点击时显示更多内容，但它是针对帖子的，我想让它适用于我的自定义帖子类型“Klanten”。

我尝试编辑代码以匹配我的帖子类型，但出现错误：“未定义索引：偏移量”

functions.php

wp_enqueue_script( 'dfib-theme-custom', get_template_directory_uri() .'/js/custom.js', array('jquery') );
wp_localize_script( 'dfib-theme-custom', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php')) );


add_action( 'wp_ajax_load_more_posts', 'load_more_posts' );
add_action( 'wp_ajax_nopriv_load_more_posts', 'load_more_posts' );

function load_more_posts(){
    global $post;
    $args = array('post_type'=>'klanten', 'posts_per_page'=> 4, 'offset'=> $_POST['offset']);
    $rst=[];
    $query = new WP_Query($args);
    if($query->have_posts()):
        while($query->have_posts()):$query->the_post();
            $rst[] = $post;
        endwhile;
        wp_reset_postdata();
        $offset = $_POST['offset']+4;
    endif;
    wp_send_json_success(array('klanten'=>$rst, 'offset'=>$offset));
}

custom.js

$('#load_more_posts').on('click', function(e){
    console.log('hi');
    e.preventDefault();
    var $offset = $(this).data('offset');
    console.log('var'+$offset);
    $.ajax({
        method: 'POST',
        url: ajax_object.ajax_url,
        type: 'JSON',
        data: {
            offset: $offset,
            action: 'load_more_posts'
        },
        success:function(response){
            console.log(response);
            $('#load_more_posts').data('offset', parseInt(response.data.offset));
        }
    }); 
})

php 文件

$query = new WP_Query( array(
        'post_type' => 'klanten',
        'posts_per_page' => 4,
        'offset' => 0,
        'paged' => 1,
        'order' => 'ASC',
        'orderby' => 'rand',
    ) );
    if ( $query->have_posts() ) { ?>
        <div class="klanten__wrapper">
            <?php
            while ( $query->have_posts() ) : 
                $query->the_post(); 
                ?>
                <div class="logo__wrapper">
                    <img class="klant__logo" src="<?php the_post_thumbnail_url(); ?>">
                </div>
            <?php endwhile; ?>
            <div id="load_more_posts" class="loadmore">Load More...</div>
        </div>

        <?php 
        wp_reset_postdata(); 
        return ob_get_clean();
    }

控制台日志

我想显示 4 个徽标（元素），并且每次有人单击 loadmore 按钮时再加载 4 个

Answer 1

替换这个

<div id="load_more_posts" class="loadmore" data-offset="4">Load More...</div>

您需要返回带有徽标数组的 ajax 数据，然后像下面的代码一样附加数据。 AJAX 调用

$('#load_more_posts').on('click', function(e){
        console.log('hi');
        e.preventDefault();
        var $offset = $(this).data('offset');
        console.log('var'+$offset);
        $.ajax({
            method: 'POST',
            url: ajax_object.ajax_url,
            type: 'JSON',
            data: {
                offset: $offset,
                action: 'load_more_posts'
            },
            success:function(response){
                console.log(response);
                 var html = "";
                 $(response.data.klanten).each(function(index,value) {
                      html += '<div class="logo__wrapper"> <img class="klant__logo" src="'+value.post_thumbnail+'"></div>'
                 }); 
                 $('.logo_wrapper').append(html);
                $('#load_more_posts').data('offset', 
                  parseInt(response.data.offset));
            }
        }); 
    })

HTML 代码

 <div class="klanten__wrapper">
 <div class="logo_wrapper">
            <?php
            while ( $query->have_posts() ) : 
                $query->the_post(); 
                ?>
                <div class="logo__wrapper">
                    <img class="klant__logo" src="<?php the_post_thumbnail_url(); ?>">
                </div>
            <?php endwhile; ?>
            <div>
            <div id="load_more_posts" class="loadmore">Load More...</div>
        </div>

函数.php

wp_enqueue_script( 'dfib-theme-custom', get_template_directory_uri() .'/js/custom.js', array('jquery') );
wp_localize_script( 'dfib-theme-custom', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php')) );


add_action( 'wp_ajax_load_more_posts', 'load_more_posts' );
add_action( 'wp_ajax_nopriv_load_more_posts', 'load_more_posts' );

function load_more_posts(){
    global $post;
    $args = array('post_type'=>'klanten', 'posts_per_page'=> 4, 'offset'=> $_POST['offset']);
    $rst=[];
    $query = new WP_Query($args);
    if($query->have_posts()):
        while($query->have_posts()):$query->the_post();
            $rst[] = $post;
            $post_thumbnail = get_the_post_thumbnail($post->id);  
            $rst['post_thumbnail'] = $post_thumbnail;
        endwhile;
        wp_reset_postdata();
        $offset = $_POST['offset']+4;
    endif;
    wp_send_json_success(array('klanten'=>$rst, 'offset'=>$offset));
}

Answer 2

我得到了一位同事的帮助，他想通了。我在我的 js 文件（jQuery）中添加了这个

// Counter for logos
    var logoCount = $('.logo__wrapper').length;
    var counter = 12;

    // Show only first 12 logos
    $('.logo__wrapper:nth-of-type(1n+13)').addClass('is-hidden');

    // Load more logos button click
    $('#load_more_posts').on('click', function (e) {

        // Loop hidden logo's
        $('.logo__wrapper.is-hidden').each(function (i) {

            // Hide button if no more logo's
            if (counter++ === logoCount) {
                $('#load_more_posts').hide();
                $('.loadmore__end').toggle();
            }

            // Show next 12 logos
            if (i < 12) {
                $(this).removeClass('is-hidden');
            }
            // Break loop after 12 logos
            else {
                return false;
            }
        });
    });