Как сделать чтобы скрипт работал для всех указанных id?

Question

[UncleDenn]

У меня есть скрипт который анимирует цифры ,но он работает только для одного id хотя под этим id несколько строк
Вопрос в том как сделать чтобы он работал для всех id на странице?

<div class="col-md-4">
                    <div class="box-n" style="background: #fe754b;">
                    <h3 data-num="2" id="fun-level">0%</h3><span class="text-nb">After</span>
                    <h3 data-num="9"  class="num-n">0%</h3><span class="text-n">Before</span>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="box-n" style="background: #decb41;">
                    <h3 data-num="40" id="fun-level">0%</h3><span class="text-nb">After</span>
                    <h3 data-num="18"  class="num-n">0%</h3><span class="text-n">Before</span>
                    </div>
                </div>

var time = 2, cc = 1;

$(window).scroll(function() {
  $('#fun-level').each(function(){
    var cPos = $(this).offset().top;
    var topWindow = $(window).scrollTop();
    
  if (cPos < topWindow + 1000) {
    if (cc < 2) {
        cc = cc + 3;
           var 
            i = 1,
            num = $(this).data('num'),
            step = 1000 * time / num,
            that = $(this),
            int = setInterval(function(){
              if (i <= num) {
                that.html(i + '%');
              }
              else {
                clearInterval(int);
              }
              i++;
              },step);
     }
  }
  });
});

Comments

[iBird Rose]

htmlbook.ru/html/attr/id
Задает стилевой идентификатор — уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.
https://www.youtube.com/watch?v=fDqK8a4Ui7U

Answer 1

[MrTimon]

Id на странице должно быть уникальным так как это индификатор елемента, потому jquery и возращает только первій попавшийся елемент. Добавте до елементов класс (можно и такой же как и id) и в строке
$('#fun-level').each(function(){

измените селектор на выбор по классу
$('.fun-level').each(function(){

Comments

[UncleDenn]

не работает и так

[MrTimon]

UncleDenn, А вы классы добавили? Может проблема впринцепе и в коде скрипта, там не розбирался.

[UncleDenn]

да классы поменял
код работает для одного элемента как надо

[MrTimon]

UncleDenn, Ну у вас проблема в коде значит. Для одного он работает а для нескольких может и не работать. К примеру вижу ошибку с переменной cc. Она у вас сначала равна 1 а потом при каждом выполнении скрипта додается 3 cc = cc + 3; при том что сначала проверяется if (cc < 2) { тоисть оно только один раз и выполнится, потому что после первого раза сс будет равно 5.

[UncleDenn]

да точно в этом был траб,но я это написал чтоб код один раз работал а не постоянно
то есть один раз анимировал цифры

[MrTimon]

UncleDenn, Ну можно другое условие поставить. Например проверять если $(this).html() != '0%'; то не запускать скрипт для этого елемента а те проверки с переменной cc убрать вообще

Answer 2

[Alexey Bille]

Может использовать классы вместо ид?

Comments

[UncleDenn]

не работает

Answer 3

[leni_m]

через id работают с одним элементом, через class с несколькими

Comments

[UncleDenn]

не работает

[leni_m]

UncleDenn, измененный html в студию

[UncleDenn]

<div class="wow fadeInLeft col-md-4 box-m">
                    <div class="box-n" style="background: #d44132;">
                    <h3 data-num="2" class="fun-level">0%</h3><span class="text-nb">After</span>
                    <h3 data-num="9"  class="fun-level" id="num-n">0%</h3><span class="text-n">Before</span>
                    </div>
                </div>
                <div class="wow fadeInUp col-md-4 box-m ">
                    <div class="box-n" style="background: #4fc1e9;">
                    <h3 data-num="40" class="fun-level">0%</h3><span class="text-nb">After</span>
                    <h3 data-num="18"  class="fun-level"  id="num-n">0%</h3><span class="text-n">Before</span>
                    </div>
                </div>

[leni_m]

UncleDenn, тут все нормуль
так у вас проблема в самом коде js

if (cc < 2) {
        cc = cc + 3; // 1+3 = 4

и следующая проверка
if (4 < 2) { тут не выполниться