Счетчик forEach this не применяется

Question

/*СЛЕДУЮЩИЕ 3 СТРОЧКИ СМУЩАЮТ*/

// выбираем все элементы
const span = document.querySelectorAll(".html span");
span.forEach(function() {
  //получаем число из строки текущего элемента
  const txt = parseInt($(this).innerText);
  // Получаем отступ блока
  let blockTop = $(".html").offset().top,
    // Высота видимой части
    wh = window.innerHeight,
    // Флаг активации
    flag = true,
    counter = (_) => {
      if (counter._count > txt) {
        // Если счёт дошёл до 10, то
        counter._count = txt; // Сбросим
        flag = !flag; // Всё
        return; // И выходим
      }
      // Иначе делаем что нужно
      $(".html span").text(counter._count++);
      // И ставим таймер на следующую итерацию
      setTimeout(counter, 500);
    };

  counter._count = 0;
  $(document).ready((_) => {
    flag = !flag;
    counter();
  });
  $(window).scroll((_) => {
    // Слушаем скролл окна
    if (flag && blockTop < $(window).scrollTop() + wh) {
      // Если флаг позволяет запустить таймер и скролл дошёл
      flag = !flag; // Меняем доступность флага (чтобы каждый раз не запускался счётчик и не навешал сотню таймеров)
      counter(); // Запускаем что надо
    }
  });
});

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<div class="my-skills mt-2">
  <div class="html"><span>99</span></div>
  <div class="html"><span>50</span></div>
  <div class="html"><span>75</span></div>
  <div class="html"><span>41</span></div>
  <div class="html"><span>5</span></div>
  <div class="html"><span>20</span></div>
  <div class="html"><span>30</span></div>
  <div class="html"><span>7</span></div>
</div>

Answer 1

Проблема была в том,что счетчик не применялся к каждому элементу, хотя я указывал forEach, помогла вызывать функцию с параметром для каждого элемента

/*Счетчик */
    function MyCount(a) {

        console.log(a);
        var txt = parseInt(
          document.querySelector('.html:nth-child('+a+')  span').innerText
        );
        console.log(txt); //Получаем первый элемент
        let blockTop = $(".html").offset().top, // Получаем отступ блока
          wh = window.innerHeight, // Высота видимой части
          flag = true, // Флаг активации
          counter = (_) => {
            if (counter._count > txt) { // Если счёт дошёл до нужного, то
              $('.html:nth-child('+a+')  span').text(txt); // Сбросим
              flag = !flag; // Всё
              return; // И выходим
            }

            $('.html:nth-child('+a+')  span').text(counter._count++); // Иначе делаем что нужно

            setTimeout(counter, 500); // И ставим таймер на следующую итерацию
          };
    ;
        counter._count = 0;
        $(document).ready((_) => {
          flag = !flag;
          counter();
        });
        $(window).scroll((_) => {
          // Слушаем скролл окна
          if (flag && blockTop < $(window).scrollTop() + wh) {
            // Если флаг позволяет запустить таймер и скролл дошёл
            flag = !flag; // Меняем доступность флага (чтобы каждый раз не запускался счётчик и не навешал сотню таймеров)
            counter._count = 0;
            counter(); // Запускаем что надо
          }
        });
      }



    $(document).ready(function(){
      let length = document.querySelectorAll(".html span");
      a=0;
      for(i=0;i<length.length;i++){
        a++;
      MyCount(a);
      }
    })

БЛОГ НА HUSL

Счетчик forEach this не применяется

Ответы (1 шт):