单个页面上的多个进度条

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

或者你可以像这样使用 class

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

单个页面上的多个进度条

multiple progress bar on single page

javascript

jquery

progress-bar

选项 1

选项 2