Заменить или переключить счетчик на JavaScript? - PullRequest
Новая
       9

Заменить или переключить счетчик на JavaScript?

0 голосов
/ 29 апреля 2020

Я работаю в контролируемой среде, где у меня нет доступа для редактирования оригинальных файлов dev, и я могу только пытаться перезаписать. Я крайне неопытен с JavaScript, но я хотел бы попытаться переключить отображение вывода при загрузке страницы.

У нас есть функция отслеживания прогресса на основе выполненных условий (ie, «просмотрено», «выполнено», «пройдено» и т. Д. c). Выходные данные читаются как простой текст «Прогресс: 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 лучше? Я уверен, что есть более разумное решение, чем то, что я пытаюсь, но я в порядке, вручную добавляя случаи для всех возможных успехов. Rat ios.

Ответы [ 3 ]

1 голос
/ 29 апреля 2020

Ваша функция на самом деле в порядке, если у вас есть только эти 3 случая, нет необходимости в более динамичном c решении.

В любом случае, вот более динамичное c решение, которое также работает с 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>
1 голос
/ 29 апреля 2020

Идея вашего кода идеальна, но она терпит неудачу, потому что вы настраиваете добавление текстового значения перед объявлением значения, я делаю пример с некоторыми изменениями:

  1. Я ставлю звезды в массиве, потому что таким образом я могу получить более легкий доступ к звездам,
  2. Я перебираю элементы с классом ul с помощью forEach, но так как getElementByClassName возвращает HTMLCollection (не массив), прежде чем я итерации элементов, необходимо добавить nodeElements в массив, и я делаю это с помощью оператора распространения
  3. Я использую innerText вместо внутреннего HTML, потому что это более производительный (в этом случае разница не важна но на всякий случай)

Я привел пример с ошибкой, просто чтобы увидеть, что все работают так, как вы ожидали. 

 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>
1 голос
/ 29 апреля 2020

Я сделал вам рабочий пример: 

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>
...