JS가 첫 번째 ID를 두 번째로 읽지 않습니다.

Question

Ok 진행률 막대가로드되는 비율에 따라 일부 JS가 막대 안에 표시됩니다.

지금 내가 변경 그러나 때, 10th 또는 3rd이 점수에 따라 같은 비율이 표시됩니다 않는 측면을 따라 추가 할 네브라스카 ID에 끌어하려는 그러나

$("#next-button").click(function() { 
     a.eventHub.publish("ui/nextclick") 
     }); 

    UI.prototype.updatePercentile = function(a) { 
     if (this.isStandalone || -1 == a.percentile) $("#results-percentages") 
      .hide(); 
     else { 
      $("#results-percentages") 
      .show(), $("#results-percentile-1") 
      .html(a.percentile), $("#results-suffix") 
      .html(a.suffix), $("#results-suffix-2") 
      .html(a.suffix), 1 === a.timesTaken ? ($("#results-timestaken") 
       .html(a.timesTaken + " time"), $("#results-percentile-2") 
       .html("100")) : ($("#results-timestaken") 
       .html(a.timesTaken + " times"), $("#results-percentile-2") 
       .html(a.percentile)); 
      var b = 0; 
      $("#percentile-scale .scale-item") 
      .each(function() { 
       b += $(this) 
       .outerWidth() 
      }), $("#percentile-scale .scale-indicator").css("width", b * a.percentile/100 + "%"), 
      $(".scale-marker").css("left", b * a.percentile/100 + "%") 
     } 
    } 

     function move() { 
      var elem = document.getElementById("myBar"); 
      var width = 0; 
      var id = setInterval(frame, 50); 

      function frame() { 
      if (width >= document.getElementById("results-percentile-2").innerHTML) { 
       clearInterval(id); 
      } else { 
       width++; 
       elem.style.width = width + '%'; 
       document.getElementById("demo").innerHTML = width * 1 + '%'; 
      } 
      } 
     } 

노호 작업 코드를 참조하십시오 내 JS는 다른 ID (아래 참조)를 포함하기 위해 th, rd 또는 st 번호 만 보여줍니다.

HTML

<h3 style="text-align: left;"> You scored in the <em class="big-six"><span id="results-percentile-1"></span><span id="results-suffix-2"></span></em> percentile. 
         </h3> 

    <div class="myProgress"> 
          <div id="myBar" style="width:0"> 
           <div id="demo"><span id="results-suffix"></span></div> 
           <!--<div id="demo"></div>--> 
          </div> 

JS

(function() { 
     var elem = document.getElementById("myBar"); 
     var width = 0; 
     var id = setInterval(frame, 50); 

     function frame() { 
      if (width >= Number(document.getElementById("results-percentile-2").innerHTML)) { 
       clearInterval(id); 
      } else { 
       width++; 
       elem.style.width = width + '%'; 
       document.getElementById("demo").innerHTML = width * 1 + document.getElementById("results-suffix").innerHTML ; 
      } 
     } 
    }()); 

Answer 1

ID는 유일해야. 동일한 식별자로 여러 요소가 필요한 경우 클래스를 사용하십시오. 예를 들어

:

<div id="myBar" style="width:0"> 
    <div class="demo"><span class="results-suffix"></span></div> 
    <div class="demo"></div> 
</div> 

그리고 당신의 자바 스크립트가 변경됩니다 :

function frame() { 
    if (width >= Number(document.getElementById("results-percentile-2").innerHTML)) { 
     clearInterval(id); 
    } else { 
     width++; 
     elem.style.width = width + '%'; 
     var demoElems = document.getElementsByClassName('demo'); 

     var i, innerHTML, resultsElems; 
     // loop through the list of elements 
     for(i = 0; i < demoElems.length; i++) { 
      resultsElems = demoElems[i].getElementsByClassName('results-suffix') 
      innerHTML = width * 1; 
      // only append the results-suffix element if it exists 
      if(resultsElems.length > 0) { 
       innerHTML += resultsElems[0].innerHTML; 
      } 
      demoElems[i].innerHTML = innerHTML; 
     } 
    } 
}