3 回答

TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超3個(gè)贊
您的功能實(shí)際上很好,如果您只有這 3 種情況,則不需要更動(dòng)態(tài)的解決方案。
無(wú)論如何,這是一個(gè)更動(dòng)態(tài)的解決方案,它也適用于 3/4、5/5 ...。
這個(gè)想法是提取第一個(gè)和第二個(gè)數(shù)字(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>

TA貢獻(xiàn)1830條經(jīng)驗(yàn) 獲得超3個(gè)贊
我給你做了一個(gè)工作示例:
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>

TA貢獻(xiàn)1865條經(jīng)驗(yàn) 獲得超7個(gè)贊
您的代碼的想法是完美的,但它失敗了,因?yàn)槟谙蚱涮砑又抵霸O(shè)置了添加文本值,我做了一個(gè)帶有一些更改的示例:
我把星星放在一個(gè)數(shù)組中,因?yàn)檫@樣我可以更容易地訪問(wèn)星星,
我使用 forEach 使用 ul 的類來(lái)迭代元素,但是由于
getElementByClassName
在迭代元素之前返回一個(gè) HTMLCollection(不是數(shù)組),因此有必要將 nodeElements 添加到數(shù)組中,并且我使用擴(kuò)展運(yùn)算符來(lái)執(zhí)行此操作我使用 innerText 而不是 innerHTML 因?yàn)樾阅芨撸ㄔ谶@種情況下,差異并不重要,但以防萬(wàn)一)
我設(shè)置了一個(gè)錯(cuò)誤示例,只是為了看到所有功能都符合您的預(yù)期。
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>
添加回答
舉報(bào)