JSは最初のIDだけを読み取っていません

Question

私はいくつかのJSがプログレスバーがロードし、バーの中に％を表示する割合に応じている。

はそれが私が変えるしかしとき、スコアに応じて、10thまたは3rdのように表示されますかしかし、今私は側面に沿ってパーセンテージを追加するには、NEの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は一意である必要があります。同じ識別子を持つ複数の要素が必要な場合は、クラスを使用します。例えば

：（それが縮小されたように、その後、 "プリティプリント" に見える）文字化けのコードを示していない

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