Question

我想使用WordPress Rest API实现加载更多（按钮）选项来加载有限数量（12）的帖子。我正在使用以下代码来实现这一点。

var postsDiv = $('#posts');

$.getJSON('https://localhost/wp-json/wp/v2/alljobs/?per_page=12&page=1', function(data) {

        postsDiv.empty();

        $.each(data, function(i, jobs) {
            const link = jobs.acf.link;
            const title = jobs.title.rendered;
            const excerpt = jobs.acf.company;
            const location = jobs.acf.location;
            const logo = jobs.better_featured_image.media_details.sizes.medium.source_url;

    postsDiv.append('<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">  <div class="job-grid"> <div class="job-title-sec"> <div class="c-logo">   <img src=' + logo + ' alt="" />     </div> <h3>' + title + ' </h3> <span>' + excerpt + '</span></div>    <span class="job-lctn">' + location + '</span>  <a href=' + link + ' target="_blank"> View</a></div></div>' );
    });

});

我有大约100个帖子，我想在初始页面加载时默认显示12个帖子，我想要一个按钮，用户可以点击每次加载下12个帖子。任何想法和帮助都会很棒。

Answer 1

试试这些：

[HTML]（您可以根据自己的心愿设置或编码按钮。这里重要的是class属性。）

<div id="posts">
    <p>Posts list goes right here.</p>
</div>

<!-- This element is expected to be INITIALLY HIDDEN. -->
<p class="load-more-prev-next" style="display: none;">
    <button class="btn-load-more-prev">&larr; Prev</button>
    <button class="btn-load-more-next">Next &rarr;</button>
    <noscript>Please enable JavaScript.</noscript>
</p>

[JS]（确保编辑renderItems()代码。）

jQuery( function( $ ) {
    var postsDiv = $( '#posts' ),
        _pages = null,
        _paged = 1;

    function renderItems( data ) {
        postsDiv.empty();

        // Here, I use 'item' and not 'jobs'.
        $.each( data, function( i, item ) {
            const link = item.acf.link;
            // Set other const here.

            // postsDiv.append() etc.
        } );

    }

    function fetchItems( page ) {
        var n = ( page || 1 ),
            url = 'http://localhost/wp-json/wp/v2/alljobs?per_page=12&page=' + n;

        return $.getJSON( url, function ( data, status, xhr ) {
            _pages = _pages || xhr.getResponseHeader( 'X-WP-TotalPages' ) || 1;

            renderItems( data || [] );
        } );
    }

    // Loads initial items.
    fetchItems();

    // Displays one of the "load more" buttons.
    $( '.btn-load-more-prev' ).hide();
    //$( '.btn-load-more-next' ).show();
    $( '.load-more-prev-next' ).show();

    function _prevNext( btn, prev ) {
        btn.disabled = true;

        if ( prev ) {
            if ( _paged >= 1 ) {
                _paged--;
            } else {
                _paged = 1;

                return;
            }
        } else {
            if ( _paged < _pages ) {
                _paged++;
            } else {
                _paged = _pages;

                return;
            }
        }

        fetchItems( _paged ).always( function () {
            btn.disabled = false;

            if ( prev ) {
                if ( _paged >= 1 ) {
                    $( '.btn-load-more-next' ).removeAttr( 'disabled' ).show();
                }

                if ( _paged < 2 ) {
                    $( btn ).hide();
                }
            } else {
                if ( _paged >= 2 ) {
                    $( '.btn-load-more-prev' ).removeAttr( 'disabled' ).show();
                }

                if ( _paged >= _pages ) {
                    $( btn ).hide();
                }
            }
        } );
    }

    $( '.load-more-prev-next' ).on( 'click', '.btn-load-more-prev', function () {
        _prevNext( this, true );
    } ).on( 'click', '.btn-load-more-next', function () {
        _prevNext( this );
    } );
} );

有关分页的更多信息，请参阅this doc。

加载更多选项（按钮）以使用WordPress Rest API获取帖子

1 个答案: