JS不读取第一个ID，只读取第二个ID

JS does not read first ID only second

本文关键字：ID 读取 第二个 第一个 JS      更新时间：2023-09-26

好的，我有一些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 + '%';
            }
          }
        }

然而，现在我想引入一个ne 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   ;
            }
        }
    }());

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;
        }
    }
}
相关文章：