用 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) => {&nbsp; [n, k] = x.innerHTML.replace ('Progress: ', '').split ('/');&nbsp; text = '';&nbsp; for (let i=0; i<n; i++) text += '★';&nbsp; for (let i=0; i<k-n; i++) text += '☆';&nbsp;&nbsp;&nbsp; x.innerHTML = text;});<li>&nbsp; &nbsp; <span class="completionstatus">Progress: 0/2</span></li><li>&nbsp; &nbsp; <span class="completionstatus">Progress: 1/2</span></li><li>&nbsp; &nbsp; <span class="completionstatus">Progress: 2/2</span></li>

Answer 2

我给你做了一个工作示例：function myFunction() {&nbsp; var text;&nbsp;&nbsp;&nbsp; // Iterate all elements and replace with stars&nbsp; Array.from(document.getElementsByClassName("completionstatus")).forEach(&nbsp; &nbsp; function(elm, index, array) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (elm.innerHTML === "Progress: 0/2") elm.innerHTML= "☆☆";&nbsp; &nbsp; &nbsp; else if (elm.innerHTML === "Progress: 1/2") elm.innerHTML= "★☆";&nbsp; &nbsp; &nbsp; else if (elm.innerHTML === "Progress: 2/2") elm.innerHTML= "★★";&nbsp; &nbsp; }&nbsp; );}window.onload = function() {&nbsp; myFunction();}<li>&nbsp; &nbsp; <span class="completionstatus">Progress: 0/2</span></li><li>&nbsp; &nbsp; <span class="completionstatus">Progress: 1/2</span></li><li>&nbsp; &nbsp; <span class="completionstatus">Progress: 2/2</span></li>

Answer 3

您的代码的想法是完美的，但它失败了，因为您在向其添加值之前设置了添加文本值，我做了一个带有一些更改的示例：我把星星放在一个数组中，因为这样我可以更容易地访问星星，我使用 forEach 使用 ul 的类来迭代元素，但是由于getElementByClassName在迭代元素之前返回一个 HTMLCollection（不是数组），因此有必要将 nodeElements 添加到数组中，并且我使用扩展运算符来执行此操作我使用 innerText 而不是 innerHTML 因为性能更高（在这种情况下，差异并不重要，但以防万一）我设置了一个错误示例，只是为了看到所有功能都符合您的预期。&nbsp;function replaceText() {&nbsp; &nbsp; &nbsp; &nbsp; const stars = ["☆☆", "★☆", "★★"];&nbsp; &nbsp; &nbsp; &nbsp; const completionStatusElements = document.getElementsByClassName("completionstatus");&nbsp; &nbsp; &nbsp; &nbsp; [...completionStatusElements].forEach((el) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let elementText = el.innerText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (elementText === "Progress: 0/2") el.innerText = stars[0];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else if (elementText === "Progress: 1/2") el.innerText = stars[1];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else if (elementText === "Progress: 2/2") el.innerText = stars[2];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else el.innerText = "error";&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; }<li>&nbsp; &nbsp; &nbsp; <span class="completionstatus">Progress: 0/2</span>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; <span class="completionstatus">Progress: 1/2</span>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; <span class="completionstatus">Progress: 2/2</span>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; <span class="completionstatus">Progress:sdf 2/2</span>&nbsp; &nbsp; </li>