加載內容順序使用jQuery

從這個問題TJ克勞德的代碼（jQuery load content sequentially）是我基於此，但由於某種原因，它不工作，因爲我的預期。加載內容順序使用jQuery

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

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

然後，應按順序，一個接另一個從data-page屬性加載URL，並將「Panel X」替換爲從該數據頁的URL拉取的內容。

我打算使用它來做一些需要一段時間加載的圖表，所以我在我的網站（test.php文件）上寫了一個「測試」頁面，它等了5秒鐘，然後顯示一個隨機數和一些伊索寓言現在模擬延遲，然後傾銷一些文本。

如果你去測試文件它工作正常，但它不是從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;

仍未顯示預期的內容test.php輸出文件的任何div。

來源

2015-11-20 James Orr

「從字面上等待5秒」與「等待5秒」不同嗎？ –

在這種情況下，它表明它：sleep（5）; –

「運行代碼片段」將不起作用，因爲它運行在與您的域不同的域中，並且jQuery的加載函數使用Ajax，該域將被阻止用於跨域請求。剛剛在您的網站上嘗試過，在調試器控制檯上的$（「body」）.load（「http://jamesorr.com/test.php」）工作正常，它會使用加載的內容填充正文。 – 11thdimension

如果http://jamesorr.com/test.php是一個跨域請求，jquery load將不會工作，由於安全原因。但它應該工作，如果它是一個原產地請求。優化您的代碼爲triggerLoad()執行超過預期（5次而不是4次）。

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

來源

2015-11-20 04:52:06

謝謝Sudipta。我只是用<來代替<=。它仍然沒有在我自己的領域工作，仍然不知道爲什麼。 –

加載內容順序使用jQuery

回答

相關問題