Wordpress，ajax加载的内容

Question

所以，我非常喜欢 php、ajax 和任何 javascript。我已经通过各种教程和陈腐的方法将这个网站放在一起，使事情顺利进行。但是，我遇到了两个围绕 URL 的问题。

1. 我不知道如何使用后退按钮将某些内容正确绑定到点击帖子时发生的操作。

2. 子网址直接指向帖子内容（single.php），而不是内容拉起的索引模板。

现在，这是我的代码。我敢肯定它有一百万个问题。

(function($) {

  $(function($) {
        $(".post-link").click(function loadContent(){
            $(this).parent().addClass('fullscreen');
            $('.close').toggleClass('closeactive').removeClass('close');
            $(".back, .next").show();
            $('body').addClass('noscroll');

        });

        $(document).ready(function(){
        $.ajaxSetup({cache:false});
        $(".post-link").click(function(e){
            var post_link = $(this).attr("href");

            $(this).siblings('#single-post-container').html("content loading");
            $(this).siblings('#single-post-container').load(post_link);
            window.history.pushState('object', 'New Title', post_link);
            e.preventDefault();

        window.onpopstate = function(event) {
            $("#loading").show();
            console.log("pathname: "+location.pathname);
            loadContent(location.pathname);
            $(this).parent().removeClass('fullscreen');
        };

        return false;
        });

    });
});

基本上，发生的事情是大量的 css 和 ajax 调用。我不完全确定我做对了，但它运行得很好。你可以在我的网站 www.andbloom.com 上看到它的实现。任何帮助将不胜感激！

Answer 1

第一点

你已经绑定了 back 事件，用

window.onpopstate = function(event) {
    $("#loading").show();
    console.log("pathname: "+location.pathname);
    loadContent(location.pathname);
    $(this).parent().removeClass('fullscreen');
};

这个函数运行的时候报错了，因为loadContent函数没有被定义（需要从click()中取出来，如果要使用之前定义好了）。
另一件事是您不应该在$(".post-link").click(function(e){} 中添加此代码，因为您只需绑定一次。
最后一件事是你不需要绑定点击事件两次。 请参阅下面的示例，其中包含更新的代码 sn-p。我无法在浏览器中对此进行测试，因为您在 index (html) 中有代码，而不是单独的 JS 文件。

$(function ($) {
    $(document).ready(function () {
        $.ajaxSetup({cache: false});

        $(".post-link").click(function (e) {
            e.preventDefault();

            // this was moved from the function above, as you
            // don't need two events
            $(this).parent().addClass('fullscreen');
            $('.close').toggleClass('closeactive').removeClass('close');
            $(".back, .next").show();
            $('body').addClass('noscroll');

            var post_link = $(this).attr("href");

            $(this).siblings('#single-post-container').html("content loading");
            $(this).siblings('#single-post-container').load(post_link);
            window.history.pushState('object', 'New Title', post_link);
        });


        window.onpopstate = function (event) {
            // here you should add the logic to reverse (similar to what you have on the close event)
            $(this).parent().removeClass('fullscreen');
            $('.closeactive').toggleClass('close').removeClass('closeactive');
            $(".back, .next").hide();
            $('body').removeClass('noscroll');
        };
    });
});

第二点

这个问题有点复杂。
这里的一种方法是让您在 single.php 模板上添加与主页上相同的代码，并最初通过 javascript 显示该单曲。 或者在单个页面上添加一个重定向到主页，其中 GET 参数保存单个页面的值，例如http://www.andbloom.com/?s=funny-or-die
无论您在这里选择什么，您还需要更新您的 ajax 调用以创建一个单独的函数以仅返回您在 single.php 上拥有的（简单的 html）

其他说明

• 您应该将代码从内联移至单独的文件并格式化。真的很难通读，而且我不能编辑东西，因为开发工具只允许编辑外部 JS 和 CSS 文件
• 页面上有多个具有相同 ID 的元素。我指的是single-post-container
• 对于与此功能相关的整个代码，您确实应该只有一个 $( document ).ready(function() {}。