javascript - JS不读取第一个ID，只读取第二个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;
        }
    }
}