使用jQuery順序加載內容

Question

TJ Crowder從這個問題開始的代碼（ jQuery依次加載內容）是我基於此的內容，但是由於某些原因，它無法按我期望的那樣工作。

我如何閱讀它，它應該加載頁面並有4個div，它們基本上顯示為：

面板1面板2面板3面板4

然后，它應該順序地，一個接一個地從data-page屬性中加載URL，並將“面板X”替換為從該data-page的URL中提取的內容。

我將使用它來加載一些需要一段時間的圖表，因此我在我的網站上編寫了一個“測試”頁面（test.php文件），該頁面實際上等待5秒鍾，然后顯示一個隨機數和一些Aesop的現在寓言模擬一個延遲然后轉儲一些文本。

如果轉到測試文件，它可以正常工作，但是不會從TJ的代碼中加載它。 我想念什么嗎？

 <!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>

因此，基於下面的一些評論，我正在自己的WordPress插件域中嘗試使用它。

那里似乎對我也不起作用。

我以為這可能是“ test.php”文件的路徑，所以我什至嘗試測試了多個位置，但仍然無法正常工作：

    $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

如果http://jamesorr.com/test.php是跨域請求，則出於安全原因，無法load jquery。 但是，如果它是相同的原始請求，它應該可以工作。 優化代碼，因為triggerLoad()的執行量超出了預期（5次而不是4次）。

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

使用jQuery順序加載內容

問題描述

1 個解決方案

解決方案1
0 2015-11-20 04:52:06

使用jQuery順序加載內容

問題描述

1 個解決方案

解決方案1 0 2015-11-20 04:52:06

解決方案1
0 2015-11-20 04:52:06