在javascript中使用document.write循環輸出

問題：如何使用JavaScript中的循環構建變量的字符串內容？在javascript中使用document.write循環輸出

我需要做我在下面的腳本（PHP）中所做的，但不是將其輸出到頁面，而是需要將它作爲字符串插入到JavaScript變量中。

$titles[1]='fire'; 
$titles[2]='auto'; 
$titles[3]='health'; 
$titles[4]='loan'; 
$titles[5]='life'; 

for ($x=1; $x<=5; $x++) 
    { 
    echo 
    ' 
    <div class="ball"> 

     <p class="ball-fraction"> 
      <span id="attained-' . $titles[ $x ] . '-score">0</span>/<span id="required-' . $titles[ $x ] . '-score">0</span> 
     </p> 
     <p class="ball-title"> 
      ' . $titles[ $x ] . ' 
     </p> 
    </div> 
    ' 
    }

目的：一旦做到這一點，我可以使用該變量作爲環狀集父元素內的模塊。列表中的列表輸出，簡單地說。假設由於頁面內容的動態特性以及爲了縮短代碼的緣故，這是必要的。

實施例1： enter image description here

在這個例子中，可以用PHP隨着時間的經過而產生的用戶的5個統計模塊當頁面加載和內由JavaScript動態控制的信息（基於節點）。

實施例2： enter image description here

在這個例子中，在另一方面，環狀統計模塊需要另一個環形輸出（列表中的每個條目）內使用。

來源

2014-02-15 CuriousWebDeveloper

使用+進行字符串連接。

var titles = [ "fire", "auto", "home", "health", "life" ]; 
var result = ''; 
for (var x = 0; x < titles.length; x++) { 
    result += '<div class="ball"> \ 
       <p class="ball-fraction"> \ 
        <span id="attained-' . titles[x] + '-score">0</span>/<span id="required-' + titles[x] + '-score">0</span> \ 
       </p> \ 
       <p class="ball-title">'+ titles[x] + '</p> \ 
      </div>'; 
} 
document.getElementById('someDiv').innerHTML = result;

來源

2014-02-15 20:24:09 Barmar

完美。謝謝！ – CuriousWebDeveloper

我知道，也許這是你想要的，但用JavaScript代碼存儲HTML不是一個好的編碼習慣。 –

準備好隱藏塊模板會更好。當你需要的時候用javascript來獲取它並填充內容。 –

我的建議是，你仍然可以輸出所有的內容。但你可以用css設置display:none;。然後當你需要顯示它時，你可以在任何你想要的地方使用javascript來做到這一點。

來源

2014-02-15 20:25:48

內容是從數組中動態生成的。 – Barmar

在javascript中使用document.write循環輸出

回答

相關問題