HTML5/자바 스크립트 진행 여러 애니메이션 바

나는 많은 것들을 시도했지만, 그들 중 누구도 제대로 밝혀졌다 없습니다 ...HTML5/자바 스크립트 진행 여러 애니메이션 바

내가 HTML5/자바 스크립트 진행 표시 줄 애니메이션을하려고 한 이들의 다수가 있어요 페이지. 또한 <style> 및 <script> 태그를 사용하여 모든 HTML 파일을 유지하려고합니다.

지금 여기 내 문제는 다음과 같습니다 진행률 표시 줄의 막대 부분은 첫 번째 [See here/JSFiddle] [Where I got the code from]

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

어떤 조언을 한 후 어떤 진행률 표시 줄에 표시되지 않습니다?

감사합니다.

출처

2013-07-24 JonaK

각 막대에는 다른 ID가 있어야합니다. – Jack

그게 도움이되지 않았나요? 비록 처음에 그렇게 했어야했는데 ... – JonaK

JavaScript 함수를 수정하여 각 ID에 대한 변수를 만들었습니까? 코드가 설정되는 방식은 $ ("# progressbar")를 기반으로 변수를 생성하므로 각 막대에 대해이 작업을 수행하고 각 ID에 대해 jquery에서 진행률 막대를 설정해야합니다. – Jack

각 진행 표시 줄의 ID는 동일하지만 각각 id 즉 progressbar1, progressbar2이어야합니다. 그런 다음 각 ID에 대한 진행률 막대를 작성하기 위해 JavaScript 코드를 수정해야합니다.

출처

2013-07-24 22:52:58 Jack

진행 표시 줄에 동일한 ID가 있으므로 컴파일러에서 두 진행 표시 줄을 동일한 것으로 처리합니다.

출처

2013-07-24 22:42:41 Nebraska

예, 시도했습니다. 아무것도 바꾸지 않았어. 그건 내 부분에 어리석은 실수 였어. – JonaK

다른 아이디를 설명하기 위해 스크립트를 수정해야한다. – Jack

HTML5/자바 스크립트 진행 여러 애니메이션 바

답변

관련 문제