用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

我为您做了一个有效的例子：

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 2

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

无论如何，这是一个更具动态性的解决方案，它也适用于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>