Question

我正在努力做什么

我正在创建一个自定义WordPress网站，它会显示一个＆＃34;加载更多帖子＆＃34;页面博客（主要），类别和搜索结果中的按钮。当用户单击此按钮时，脚本将检索下一页中的帖子并将其附加到容器中。这是代码：

<script>
    document.addEventListener("DOMContentLoaded", function() {

        // display or not the btn when page is loaded

        var morePosts = $("#dom-target").text();

        if (morePosts != "true") {
            $('.load-more').css('display','none');
        }


        // button functionality 

        var pageIndex = 1;
        var numOfPages = Number($('#numOfPages').text()); // parsed from php
        var nextLink = $('#nextLink').text(); // parsed from php

        $('.load-more').click(function(){

            if (pageIndex < numOfPages) {

                var nextPosts;
                $.get(nextLink+' .post-card', function(data){

                    // get articles in next page
                    nextPosts = data;

                    // append articles
                    $('#content').append(nextPosts);

                    // change value of index and redefine nextLink
                    pageIndex++;
                    nextLink = nextLink.replace(pageIndex+'/',pageIndex+1+'/');

                    // check if button display is still needed
                    if (pageIndex == numOfPages) {
                        $('.load-more').css('transition','all 0s');
                        $('.load-more').fadeOut();
                    }
                });
            }
        });
    });
</script>

问题：它加载整个页面

我想知道$.get()是否有.load('main url .specific-class')的等价物，因为当我尝试应用类似的语法时

$.get(nextLink+' .post-card')

控制台告诉我

GET http://localhost/blog/page/2/%20.post-card 404 (Not Found)

或者，如果有办法将数据（a string）解析为HTML文档（因此我可以将jQuery应用于存储数据的变量，只获取明信片而不是整个页面）。

提前致谢！：）

Answer 1

您必须自己解析响应，只需在$()中包装并使用任何jQuery方法

即可。

$.get(nextLink, function(data){
     var nextPosts = $(data).find('.post-card');
      $('#content').append(nextPosts);
     //.......

});

通过AJAX加载（WordPress）下一个帖子页面的特定部分

我正在努力做什么

问题：它加载整个页面

1 个答案: