Bootstrap进度条问题

Question

我正在学习使用PHP制作进度条和数据库。目前为止，我的进度条没有增加其值。如果我手动将其设置为“2”，它会起作用，但是如果我将其设置为2以上的任何值，它就不起作用了。这是使用Bootstrap完成的。

这是我第一次在这样的网站上，如果我的话说不清楚，请见谅。

<?php
    $items =  $database->query("SELECT User_Items FROM Items WHERE Username = User_Here");
    if($items->num_rows)
    {
        while($row = $items->fetch_assoc())
        {
            $itemcount = $row['User_Items']; 
        }
    }
?>

<div class="row">
    <div class="col-lg-2 col-md-4 col-sm-6">
        <p>Total Items</p>
        <div class="progress">
            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="<?php echo $totalitems; ?>" aria-valuemin="0" aria-valuemax="5" style="width: 0%"></div>
        </div>

       <div class="progress">
            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="5" style="width: 0%"></div>
        </div>

        <div class="progress">
            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="5" style="width: 0%"></div>
        </div>
    </div>
</div>
<script type="application/javascript">
$('.progress-bar').each(function() {
  var min = $(this).attr('aria-valuemin');
  var max = $(this).attr('aria-valuemax');
  var now = $(this).attr('aria-valuenow');
  var siz = (now-min)*100/(max-min);
  $(this).css('width', siz+'%');
});
</script>
<?php
    mysqli_free_result($result);
    $database->close();
?>

这张图片中进度条设置为“2”。 这张图片中进度条设置为“5”，即最大值。

- i am horrible

---

你调试了 $itemcount 变量吗？它返回了任何值吗？ - Vishnu Sharma

是的。它正在提供一个值。 - i am horrible

你能否澄清一下，你是说底部进度条（值硬编码为5）不起作用？还是只有第一个带变量值的进度条不起作用。 - Chris

硬编码的部分没有像预期那样“填充”起来，保持为空。变量也是同样的情况。 - i am horrible

Answer 1

请在您的siz变量中使用parseInt()，如下所示：

替换：

$(this).css('width', siz+'%');

带有:

$(this).css('width', parseInt(siz)+'%');

它将变量值"siz"视为字符串，所以您需要从字符串更改为整数。

- Lalji Nakum

Answer 2

似乎问题出在$itemcount上，$itemcount可能为空。

参见：JsFiddle 它是有效的。

- Vishnu Sharma

---

$itemcount 打印了一个值，比如说50。但是进度条没有填满到它的最大值“5”。它保持为空。 - i am horrible

Answer 3

我认为问题在于我从未拥有过

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

已包含。
在我将其放入脚本后，它开始工作了（尽管我认为我已经有了它）。
感谢那些帮助过我的人！

- i am horrible