Question

我正在尝试在单个页面上放置具有不同值的多个进度条。价值将来自PHP的数据库。

以下是html代码。

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
    <script type="text/javascript" src="progressbar.js"></script>

    <link rel="stylesheet" type="text/css" href="progressbar.css">
    <link rel="stylesheet" type="text/css" href="skins/tiny-green/progressbar.css">

</head>
<body>


    <div id="progressBar" class="tiny-green"><div></div></div>


    <script>
        progressBar(105, $('#progressBar'));
        progressBar(15, $('#progressBar'));
    </script>

</body>
</html>

这是 progressbar.js

function progressBar(percent, $element) {
    if(percent > 100){
        percent = 100
    }

    var progressBarWidth = percent * $element.width() / 100;
    $element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "%&nbsp;");
}

单个进度条工作正常。你能告诉我如何在单页上显示多个进度条。

Answer 1

prograssBar函数创建一个新的进度条并将其附加到现有元素。你需要多个元素，你需要多个进度条。

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
    <script type="text/javascript" src="progressbar.js"></script>

    <link rel="stylesheet" type="text/css" href="progressbar.css">
    <link rel="stylesheet" type="text/css" href="skins/tiny-green/progressbar.css">

</head>
<body>
    <div id="progressBar1" class="tiny-green"><div></div></div>
    <div id="progressBar2" class="tiny-green"><div></div></div>

    <script>
        progressBar(105, $('#progressBar1'));
        progressBar(15, $('#progressBar2'));
    </script>

</body>
</html>

Answer 2

你有几个选择

选项1

您可以使用递增ID的多个元素，例如

<div id="progressBar1" class="tiny-green"><div></div></div>
<div id="progressBar2" class="tiny-green"><div></div></div>
<div id="progressBar3" class="tiny-green"><div></div></div>

并像这样发起

progressBar(105, $('#progressBar1'));
progressBar(15, $('#progressBar2'));
progressBar(105, $('#progressBar3'));

选项2

或者你可以使用这样的课程

<div class="progressbar tiny-green"><div></div></div>
<div class="progressbar tiny-green"><div></div></div>
<div class="progressbar tiny-green"><div></div></div>

传递像这样的数组

progressBar([105,34,243], $('.progressBar'));

将progressBar方法修改为类似

的方法

function progressBar(percents, $elements) {
  $elements.each(function(index, el) {
      var percent = percents[index];
      if (percent > 100) {
        percent = 100;
      }
      var progressBarWidth = percent * $element.width() / 100;
      $(el).find('div').animate({
        width: progressBarWidth
      }, 500).html(percent + "%&nbsp;");
    }
  });
}

单页上有多个进度条

2 个答案:

选项1

选项2