Как сделать для каждого элемента функцию?

Question

Сейчас счетчик запускается при загрузке страницы и последующем скролле.Но я не могу сделать к каждому спан свой счетчик. Побовал forEach , не получается

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <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>
        <script
          src="https://code.jquery.com/jquery-3.5.1.js"
          integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
          crossorigin="anonymous"
        ></script>
        <script>
          const txt = parseInt(document.querySelector(".html span").innerText); //Получаем первый элемент
          let blockTop = $(".html").offset().top, // Получаем отступ блока
            wh = window.innerHeight, // Высота видимой части
            flag = true, // Флаг активации
            counter = (_) => {
              if (counter._count > txt) {
                // Если счёт дошёл до нужного, то
                $(".html span").text(0); // Сбросим
                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>
      </body>
    </html>

БЛОГ НА HUSL

Как сделать для каждого элемента функцию?

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