Question

来自这个问题（jQuery load content sequentially）的TJ Crowder代码就是我所依据的，但出于某种原因，它并没有像我期望的那样工作。

我如何阅读它，它应该加载页面并有4个基本显示的div：

小组1 小组2 小组3 第4小组

然后，它应该按顺序，一个接一个地从data-page属性加载URL并替换＆＃34; Panel X＆＃34;从该数据页面的URL中提取的内容。

我将在一些需要一段时间加载的图表中使用它，所以我写了一个＆＃34;测试＆＃34;在我的网站上的页面（test.php文件），字面上等待5秒，然后显示一个随机数和一些Aesop的寓言，现在模拟延迟然后转储一些文本。

如果你去测试文件它工作正常，但它没有从TJ的代码中加载它。我错过了什么吗？

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>

<body>
  <div class="panel" data-page="http://jamesorr.com/test.php">Panel 1</div>
  <div class="panel" data-page="http://jamesorr.com/test.php">Panel 2</div>
  <div class="panel" data-page="http://jamesorr.com/test.php">Panel 3</div>
  <div class="panel" data-page="http://jamesorr.com/test.php">Panel 4</div>
  <script>
    // Assumes script is at the bottom of the page, just before </body>
    (function() {
      var index = 0,
        panels = $(".panel");

      triggerLoad();

      function triggerLoad() {
        var panel;

        if (index <= panels.length) {
          panel = $(panels[index]);
          ++index;
          panel.load(panel.attr("data-page"), triggerLoad);
        }
      }
    })();
  </script>
</body>

</html>

＆＃13;

所以，基于下面的一些评论，我在我自己的域中尝试使用WordPress插件，我将使用它。

它似乎也不适合我。

我想也许这是通往＆＃34; test.php＆＃34;文件，所以我甚至试图测试几个位置，它仍然无法正常工作：

    $Content .= "<h2>Bigger Test</h2>\n\n"; 
$Content .= "<div class=\"panel\" data-page=\"test.php\">Panel 1</div>\n";
$Content .= "<div class=\"panel\" data-page=\"./test.php\">Panel 1</div>\n";
$Content .= "<div class=\"panel\" data-page=\"../test.php\">Panel 1</div>\n";
$Content .= "<div class=\"panel\" data-page=\"../../test.php\">Panel 1</div>\n";
$Content .= "<div class=\"panel\" data-page=\"../../../test.php\">Panel 1</div>\n";
$Content .= "<div class=\"panel\" data-page=\"../../../../test.php\">Panel 1</div>\n";
$Content .= "<div class=\"panel\" data-page=\"../../../../../test.php\">Panel 1</div>\n";

$Content .= "<h2>Part 2 of Bigger Test</h2>\n\n"; 
$Content .= "<div class=\"panel\" data-page=\"./test.php\">Panel 2</div>\n";

$Content .= "<h2>Part 3 of Bigger Test</h2>\n\n"; 
$Content .= "<div class=\"panel\" data-page=\"test.php\">Panel 3</div>\n";

$Content .= "<h2>Part 4 (Final) of Bigger Test</h2>\n\n"; 
$Content .= "<div class=\"panel\" data-page=\"http://jamesorr.com/wp-content/plugins/realestatedata/test.php\">Panel 4</div>\n";

$Content .= <<< EOT
<script>
// Assumes script is at the bottom of the page, just before </body>
(function() {
    var index = 0,
        panels = $(".panel");

    triggerLoad();

    function triggerLoad() {
        var panel;

        if (index <= panels.length) {
            panel = $(panels[index]);
            ++index;
            panel.load(panel.attr("data-page"), triggerLoad);
        }
    }
})();
</script>
EOT;

仍然没有在任何div中显示test.php输出文件的预期内容。

Answer 1

如果load是跨域请求，则由于安全原因，jquery triggerLoad()将无效。但如果它是一个相同的原始请求它应该工作。优化您的代码，因为if (index < panels.length) { panel = $(panels[index]); ++index; panel.load(panel.attr("data-page"), triggerLoad); }执行的次数超过预期（5次而不是4次）。

Options +FollowSymLinks
RewriteEngine On
RewriteBase /API/
RewriteCond %{REQUEST_FILENAME} !-f    
RewriteRule ^(\d+)*$ /API/index.php?i=$1 [NC,L]

使用jQuery按顺序加载内容

1 个答案: