第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

用 JavaScript 替換或切換計(jì)數(shù)器?

用 JavaScript 替換或切換計(jì)數(shù)器?

撒科打諢 2022-07-21 20:51:57
我在一個(gè)受控環(huán)境中工作,我無(wú)權(quán)編輯原始開(kāi)發(fā)文件,只能嘗試覆蓋。我對(duì) JavaScript 非常不熟練,但我想嘗試在頁(yè)面加載時(shí)切換輸出顯示。我們有一個(gè)基于滿足條件(即“查看”、“完成”、“通過(guò)”等)的進(jìn)度跟蹤功能。輸出讀取為簡(jiǎn)單的文本“進(jìn)度:1/3”。我想切換這些值,并且一直在嘗試使用簡(jiǎn)單的 unicode 來(lái)實(shí)現(xiàn):<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 解決方案是什么。我試過(guò)替換,取得了巨大的成功: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();};但似乎應(yīng)該有一個(gè)更有效的解決方案。這是我對(duì) 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();  }};這在各個(gè)層面都是錯(cuò)誤的,包括我缺乏變量。關(guān)于如何解決這個(gè)問(wèn)題的任何想法?if 語(yǔ)句更好嗎?我確信我正在嘗試一個(gè)更智能的解決方案,但我可以手動(dòng)為所有可能的進(jìn)度比率添加案例。
查看完整描述

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>


查看完整回答
反對(duì) 回復(fù) 2022-07-21
?
牛魔王的故事

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>


查看完整回答
反對(duì) 回復(fù) 2022-07-21
?
鴻蒙傳說(shuō)

TA貢獻(xiàn)1865條經(jīng)驗(yàn) 獲得超7個(gè)贊

您的代碼的想法是完美的,但它失敗了,因?yàn)槟谙蚱涮砑又抵霸O(shè)置了添加文本值,我做了一個(gè)帶有一些更改的示例:

  1. 我把星星放在一個(gè)數(shù)組中,因?yàn)檫@樣我可以更容易地訪問(wèn)星星,

  2. 我使用 forEach 使用 ul 的類來(lái)迭代元素,但是由于getElementByClassName在迭代元素之前返回一個(gè) HTMLCollection(不是數(shù)組),因此有必要將 nodeElements 添加到數(shù)組中,并且我使用擴(kuò)展運(yùn)算符來(lái)執(zhí)行此操作

  3. 我使用 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>


查看完整回答
反對(duì) 回復(fù) 2022-07-21
  • 3 回答
  • 0 關(guān)注
  • 112 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)