用JavaScript替换或切换计数器

Question

我在一个受控的环境中工作，在这个环境中我没有编辑原始开发文件的权限，只能尝试重写。我对JavaScript非常不熟练，但我想尝试在页面加载时切换输出显示。

我们有一个基于满足条件(即"已查看"、"已完成"、"通过"等(的进度跟踪功能。输出显示为简单文本"Progress: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();
};

但似乎应该有一个更有效的解决方案。这是我对开关的可悲尝试：

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添加到数组中，并且我使用spread运算符来执行此操作
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>