从数组中的值创建进度条

Question

我想根据放入变量的信息动态创建进度条。然而，这不起作用：/（我还是个菜鸟） 有人可以看看，或许告诉我出了什么问题吗？

$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";

＆GT;

Answer 1

看起来像无效的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;
}

结果：