Question

我的目标：我有一个部分的表单，1-4，当用户点击“下一步”按钮时，我希望内容动画显示第2部分幻灯片，依此类推，直到表单完成。棘手的部分是我想尝试在不同的子文件夹中使用不同的php页面作为其他3个部分插入。这也会更改用户看到的URL子文件夹。

工作示例实际上是WordPress。当您单击多部分表单时，您将看到内容和URL按照我的描述进行操作。

我做了一些挖掘，看起来他们在内容上使用了React.js，但我真的找不到任何关于如何使用React.js做文件的文档，所以它让我觉得可能是自定义Ajax / jQuery或者是什么。

我的文件夹树 -

主
- 子文件夹-1
  - 的index.php
- 子文件夹-2-
  - 的index.php

等等。我唯一能想到的就是使用jQuery：

$(document).ready(function() {
  $('#form-container').on('click', '.insert', function() {
    var directory = $(this).attr('name');
    $('#form-container').load('../' + directory);

    return false;
  });
});

我在“下一步”按钮上添加“插入”类并给它一个name="Subfolder-2" $('#form-container').load('../Subfolder-2);'实际上将内容加载到div而不刷新页面但是它不会更改子文件夹在URL中。

我走错了路吗？也许我只是在寻找合适的东西？

Answer 1

好的，所以我最终弄清楚如何使用John S.提供给我的信息让内容按照我的意愿行事。在做了一些研究和几个小时的试验和错误之后，我想出了下面的JavaScript：

var data = 'start',
    url = '../' + data + '/';
    history.pushState(data, null, url);

上面我设置变量并在页面加载时立即运行history.pushState以捕获加载到内容div中的第一个div。这很重要，因为这是我在点击浏览器后退按钮时将初始加载时发生的内容加载回页面的唯一方法。

$('body').on('click', '.insert', function(e) {

        data = $(this).attr('data-name'),
        url = '../' + data + '/';

        history.pushState(data, null, url);

    request_content(data);

    return false;

});

然后我向按钮添加一个单击侦听器，类.insert重置变量，而不是抓取最初加载的页面，而是抓取将要加载的页面，然后再次使用history.pushState更改由变量确定的网址。

request_content函数是一个简单的.load函数。因此，当单击按钮时，变量已设置，URL将更改，新内容将加载到页面中，而旧内容将消失。

最后一个让我想出最长的拼图实际上就是popstate函数。我仍然不是百分之百确定它为什么会起作用，但经过几个小时的搞乱它并最终让它开始工作我不会质疑它。

window.addEventListener('popstate', function(e){
    var data = e.state;

    if(data === null) {

    } else {
        request_content(data);
    }
});

此popstate功能允许内容在返回或向前导航时返回。

CSSTricks＆lt;在学习这种方法时，CSSTricks的这篇文章帮助了TON。

再次感谢John S.指出我正确的方向！

将动态内容插入php页面并更改URL

1 个答案: