根據數組中的值創建進度條

我想根據放入變量的信息動態創建進度條。但是，這是行不通的：/（我還是一個noob）有人可以看看，也許告訴我什麼是錯的？根據數組中的值創建進度條

$skills = array("HTML & CSS:" => $htmlcss, 
      "Bootstrap:" => $bootstrap, 
      "PHP & MySql:" => $phpmysql, 
      "jQuery & JavaScript:" => $jqueryjavascript); 
$arrLen = array_count_values($skills); 

//foreach($skills as $x => $x_value) 
while($x <= $arrLen) 
{ 
    echo " 
     <p>$key</p> 
     <div class='progress'> 
      <div class='progress-bar progress-bar-striped active' role='progressbar' aria-valuenow=$value aria-valuemin='0' aria-valuemax='100' style='width: $value %> 
      </div> 
     </div> 
    "; 
    $x++; 
}

舊代碼：

<?php 

$htmlcss = 80; 
$bootstrap = 70; 
$phpmysql = 50; 
$jqueryjavascript = 5; 

$skills = array("HTML & CSS:" => $htmlcss, 
      "Bootstrap:" => $bootstrap, 
      "PHP & MySql:" => $phpmysql, 
      "jQuery & JavaScript:" => $jqueryjavascript); 
$arrLen = array_count_values($skills); 

foreach($skills as $x => $x_value) 
{ 
    echo " 
     <p>$x</p> 
     <div class='progress'> 
      <div class='progress-bar progress-bar-striped active' role='progressbar' aria-valuenow=$x_value aria-valuemin='0' aria-valuemax='100' style='width: $x_value %> 
      </div> 
     </div> 
    "; 
} 
echo "Done";

來源

2016-05-31 Christian Job Kaal

您需要的foreach循環來獲取當前進度$ X_VALUE –

foreach循環已被禁用，不使用$ X_VALUE。我曾嘗試使用$ x和$ x_value的foreach循環，但也導致了錯誤。現在不在我的電腦上，所以我不能複製/粘貼錯誤，在幾個小時後回家時會這樣做。 –

你評論過的'foreach'有什麼問題嗎？此外，你正在迴應變量'$ key'，它不會在任何地方初始化。 – Antti29

貌似無效HTML/CSS。 HTML代碼在div屬性上缺少適當的換行引號。

也width: $x_value %無效，因爲它會導致爲width: 80 %這是無效的風格。它應該是width: $x_value%

最後，除非您的整個網站使用單引號，否則您應該遵循在由PHP創建的HTML中使用雙引號。混合單引號和雙引號可能會在某些瀏覽器中正確顯示，而其他瀏覽器則會錯誤顯示（W3C Specification）。

當使用PHP輸出HTML時，可以使用NOWDOC或HEREDOC字符串樣式，以方便地使用雙引號或單引號以及變量。

<?php 
$htmlcss = 80; 
$bootstrap = 70; 
$phpmysql = 50; 
$jqueryjavascript = 5; 
$skills = [ 
    'HTML & CSS:' => $htmlcss, 
    'Bootstrap:' => $bootstrap, 
    'PHP & MySql:' => $phpmysql, 
    'jQuery & JavaScript:' => $jqueryjavascript 
]; //PHP 5.4 array syntax 
foreach($skills as $x => $x_value) { 
    echo <<<EOL 
    <p>$x</p> 
    <div class="progress"> 
     <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="$x_value" aria-valuemin="0" aria-valuemax="100" style="width: $x_value%"> 
     </div> 
    </div> 
EOL; 
}

結果：

來源

2016-05-31 15:00:33 fyrye

謝謝，這工作！我從中學到了很多東西，我會盡力理解你給我看的所有代碼。 –

根據數組中的值創建進度條

回答

相關問題