JS不讀第一個ID只有第二個

Question

好吧我有一些JS取決於百分比的進度條將加載並顯示欄內的百分比。然而

請參閱使用代碼波紋管

$("#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 + '%'; 
      } 
      } 
     } 

現在我想在網元ID拉沿側添加比例做會顯示如下視得分10th或3rd，但是當我改變我的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> 

而JavaScript將變爲：

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