Javascript 如何加载更多徽标'；阿贾克斯怎么样？

我找到了一个解决方案，如何获得一个“加载更多”按钮，在点击时显示更多内容，但它是用于帖子的，我想让它适用于我的自定义帖子类型“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();
    }

$query=新的WP\u查询（数组）(
“post_type”=>“klanten”，
“每页帖子数”=>4，
“偏移量”=>0，
“paged”=>1，
“订单”=>“ASC”，
'orderby'=>'rand'，
) );
如果（$query->have_posts（））{？>
">
加载更多。。。
替换这个

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

我从一位同事那里得到了帮助，他找到了答案。我在我的js文件（jQuery）中添加了这个

//标识计数器
var logoCount=$（'.logo__包装器'）。长度；
var计数器=12；
//仅显示前12个徽标
$（'.logo_uu包装：第n个类型（1n+13'））.addClass（'is-hidden'）；
//点击“加载更多徽标”按钮
$（'load#more_posts'）。在（'click'，函数（e）上{
//循环隐藏标志的
$（'.logo\uu wrapper.is hidden'）。每个（函数（i）{
//如果没有更多徽标，则隐藏按钮
if（计数器+++==登录计数）{
$（“#加载更多帖子”）.hide（）；
$（'.loadmore_u_end'）.toggle（）；
}
//显示下12个徽标
如果（i<12）{
$（this.removeClass（'is-hidden'）；
}
//12个标志后中断循环
否则{
返回false；
}
});
});
看起来您需要在标记中添加一个偏移属性：
现在我的错误消失了，但额外的4个徽标不会在每次偏移量正确递增4时显示。控制台中记录的偏移量（请参见上面的代码）每次都会更改，但我看不到更多的徽标在ajax成功后您需要附加徽标html。仍然不起作用。接下来的4个徽标会记录在控制台中，但我在屏幕上看不到任何内容
$('#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));
            }
        }); 
    })

 <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>

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));
}

// 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;
            }
        });
    });