HTML5/Javascript进度多个动画条_Javascript_Jquery_Html_Modernizr

HTML5/Javascript进度多个动画条

javascript jquery html

HTML5/Javascript进度多个动画条,javascript,jquery,html,modernizr,Javascript,Jquery,Html,Modernizr,我试过很多东西，但没有一件是正确的我正在尝试制作一个HTML5/Javascript进度条的动画，并且在一个页面中有多个进度条。此外，我还尝试使用和标记将所有内容保存在一个HTML文件中现在，我的问题是：在第一个进度条之后，进度条的进度条部分不会显示在任何进度条上 0% 0% 有什么建议吗谢谢大家! 进度条具有相同的id，因此编译器将两个进度条视为相同的东西。每个进度条具有相同的id，它们都应该具有不同的id，即：progressbar1，progressbar2。然后，您需要修改Ja

我试过很多东西，但没有一件是正确的

我正在尝试制作一个HTML5/Javascript进度条的动画，并且在一个页面中有多个进度条。此外，我还尝试使用

和

标记将所有内容保存在一个HTML文件中

现在，我的问题是：在第一个进度条之后，进度条的进度条部分不会显示在任何进度条上


0%
0%

有什么建议吗

谢谢大家!

进度条具有相同的id，因此编译器将两个进度条视为相同的东西。

每个进度条具有相同的id，它们都应该具有不同的

id

，即：

progressbar1

，

progressbar2

。然后，您需要修改JavaScript代码，为每个id构建一个进度条。

每个进度条都应该有一个不同的id。这样做没有帮助。虽然，我真的应该首先这么做……您是否修改了JavaScript函数，为每个id创建了一个变量？设置代码的方式是基于$（“#progressbar”）创建一个变量，因此需要对每个条执行此操作，并在jquery中为每个id.Ah设置一个进度条。这就解决了问题。谢谢我对HTML/Javascript有点陌生。您可能希望将此作为对其他有我的问题的人的答案发布—您在JSFIDLE中只使用progressbar2一次。为progressbar2设置动画的代码部分在哪里？你能给我简单介绍一下行号吗？Nvr意识-有人打败了我：）是的，我试过了。没有改变任何事情。我认为这是一个愚蠢的错误，他还需要修改他的脚本来解释不同的id

 <body>
    <div class="demo-wrapper html5-progress-bar"> <!-- This one shows just fine -->
        <div class="progress-bar-wrapper">
            <progress id="progressbar" value="0" max="100" stop="57"></progress>    <span class="progress-value">0%</span>

        </div>
    </div>
    <div class="demo-wrapper html5-progress-bar"> <!-- This one? Not so much. -->
        <div class="progress-bar-wrapper">
            <progress id="progressbar2" value="0" max="100" stop="57"></progress>   <span class="progress-value">0%</span>

        </div>
    </div>
</body>