从数组中的值创建进度条

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

?>

Answer 1

看起来是无效的html/css。HTML代码在div属性上缺少适当的包装引号。

另外，width: $x_value %是无效的，因为它将导致width: 80 %，这是无效的样式。应该是width: $x_value%

最后，除非您的整个网站使用单引号，否则您应该在PHP创建的HTML中使用双引号。在某些浏览器中，混合单引号和双引号可能会正确显示，而其他浏览器则会不正确地呈现它(W3C规范)。

您可以使用北或HEREDOC样式的字符串，以便在使用PHP输出时很容易地使用双引号或单引号以及变量。

<?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;
}

结果：

​

​