用 JavaScript 替换或切换计数器？

Question

我在一个受控环境中工作，我无权编辑原始开发文件，只能尝试覆盖。我对 JavaScript 非常不熟练，但我想尝试在页面加载时切换输出显示。我们有一个基于满足条件（即“查看”、“完成”、“通过”等）的进度跟踪功能。输出读取为简单的文本“进度：1/3”。我想切换这些值，并且一直在尝试使用简单的 unicode 来实现：<li>    <span class="completionstatus">Progress: 0/2</span></li><li>    <span class="completionstatus">Progress: 1/2</span></li><li>    <span class="completionstatus">Progress: 2/2</span></li>我不确定最好的 JS 解决方案是什么。我试过替换，取得了巨大的成功：function strReplace(){  // Variables  var myStr = 'Progress: 0/2';  var newStr = myStr.replace(/Progress: 0\/2/g, "☆☆");  // Insert modified string in paragraph  document.getElementsByClassName("completionstatus")[0].innerHTML = newStr;  }  // Load  window.onload = function() {    strReplace();};但似乎应该有一个更有效的解决方案。这是我对 switch 的悲伤尝试：function myFunction() {  var text;  var switchDisplay = document.getElementsByClassName("completionstatus")[0].innerHTML = text;  switch(switchDisplay) {    case "Progress: 0/2":      text = "☆☆";    break;    case "Progress: 1/2":      text = "★☆";    break;    case "Progress: 2/2":      text = "★★";    break;    default:    text = "error";  }  window.onload = function() {    myFunction();  }};这在各个层面都是错误的，包括我缺乏变量。关于如何解决这个问题的任何想法？if 语句更好吗？我确信我正在尝试一个更智能的解决方案，但我可以手动为所有可能的进度比率添加案例。

Answer 1

您的功能实际上很好，如果您只有这 3 种情况，则不需要更动态的解决方案。

无论如何，这是一个更动态的解决方案，它也适用于 3/4、5/5 ...。

这个想法是提取第一个和第二个数字（n和k）并打印n黑色星星和k-n白色星星。

Array.from (document.getElementsByClassName ('completionstatus')).forEach ( (x) => {

  [n, k] = x.innerHTML.replace ('Progress: ', '').split ('/');

  text = '';

  for (let i=0; i<n; i++) text += '★';

  for (let i=0; i<k-n; i++) text += '☆';

  

  x.innerHTML = text;

});

<li>

    <span class="completionstatus">Progress: 0/2</span>

</li>

<li>

    <span class="completionstatus">Progress: 1/2</span>

</li>

<li>

    <span class="completionstatus">Progress: 2/2</span>

</li>

Answer 2

我给你做了一个工作示例：

function myFunction() {

  var text;

  

  // Iterate all elements and replace with stars

  Array.from(document.getElementsByClassName("completionstatus")).forEach(

    function(elm, index, array) {

           if (elm.innerHTML === "Progress: 0/2") elm.innerHTML= "☆☆";

      else if (elm.innerHTML === "Progress: 1/2") elm.innerHTML= "★☆";

      else if (elm.innerHTML === "Progress: 2/2") elm.innerHTML= "★★";

    }

  );

}

window.onload = function() {

  myFunction();

}

<li>

    <span class="completionstatus">Progress: 0/2</span>

</li>

<li>

    <span class="completionstatus">Progress: 1/2</span>

</li>

<li>

    <span class="completionstatus">Progress: 2/2</span>

</li>

Answer 3

您的代码的想法是完美的，但它失败了，因为您在向其添加值之前设置了添加文本值，我做了一个带有一些更改的示例：

1. 我把星星放在一个数组中，因为这样我可以更容易地访问星星，

2. 我使用 forEach 使用 ul 的类来迭代元素，但是由于getElementByClassName在迭代元素之前返回一个 HTMLCollection（不是数组），因此有必要将 nodeElements 添加到数组中，并且我使用扩展运算符来执行此操作

3. 我使用 innerText 而不是 innerHTML 因为性能更高（在这种情况下，差异并不重要，但以防万一）

我设置了一个错误示例，只是为了看到所有功能都符合您的预期。

 function replaceText() {

        const stars = ["☆☆", "★☆", "★★"];

        const completionStatusElements = document.getElementsByClassName("completionstatus");

        [...completionStatusElements].forEach((el) => {

          let elementText = el.innerText;

          if (elementText === "Progress: 0/2") el.innerText = stars[0];

          else if (elementText === "Progress: 1/2") el.innerText = stars[1];

          else if (elementText === "Progress: 2/2") el.innerText = stars[2];

          else el.innerText = "error";

        });

      }

<li>

      <span class="completionstatus">Progress: 0/2</span>

    </li>

    <li>

      <span class="completionstatus">Progress: 1/2</span>

    </li>

    <li>

      <span class="completionstatus">Progress: 2/2</span>

    </li>

    <li>

      <span class="completionstatus">Progress:sdf 2/2</span>

    </li>