用 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>