Javascript 单个页面上的多个进度条_Javascript_Jquery_Progress Bar

Javascript 单个页面上的多个进度条

javascript jquery

Javascript 单个页面上的多个进度条,javascript,jquery,progress-bar,Javascript,Jquery,Progress Bar,我试图在一个页面上放置多个具有不同值的进度条。值将通过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/javas

我试图在一个页面上放置多个具有不同值的进度条。值将通过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，它工作正常。

您能告诉我如何在单个页面上显示多个进度条吗。

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>


progressBar（105，$）；
progressBar（15，$）；

您有两种选择

选择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>

选择2 或者您可以像这样使用类

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

<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'));

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

并将progressBar方法修改为如下内容

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

<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'));

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

为什么不能添加另一个具有不同ID的进度条，并以这种方式调用它？