0

Привет всем.

Как можно выбрать все classList.add?

Проблема в том что если наш DIV Дублируется то JS выдает ошибку.

Вот рабочий пример скрипта. https://jsfiddle.net/pkgzwct6/50/

<div id="test1">9</div>
<div id="test2">10</div>
<div id="test3">11</div>
<div id="test4">12</div>
<div id="test5">13</div>
<div id="test6">14</div>
<div id="test7">15</div>
<div id="test8">16</div>
<div id="test9">17</div>
<div id="test">test</div>

и сам JS.

const block1 = test1;
const block2 = test2;
const block3 = test3;
const block4 = test4;
const block5 = test5;
const block6 = test6;
const block7 = test7;
const block8 = test8;
const block9 = test9;
const block = test;
calculate_timeout = seconds => {
  now = new Date(), next = new Date();
  next.setSeconds(seconds);
  if(next.getTime() <= now.getTime())
    next.setMinutes(next.getMinutes()+1);
  return next.getTime() - now.getTime();
}
(function timer_callback() {
  let now = new Date;
  if(now.getHours() >= 06 && now.getHours() < 09){
    block.classList.add('now');
    block9.classList.remove('now');
  }
   if(now.getHours() >= 09 && now.getHours() < 10){
    block.classList.remove('now');
    block1.classList.add('now');
  }
  if(now.getHours() >= 10 && now.getHours() < 11){
    block1.classList.remove('now');
    block2.classList.add('now');
  }
    if(now.getHours() >= 11 && now.getHours() < 12){
    block2.classList.remove('now');
    block3.classList.add('now');
  } 
  if(now.getHours() >= 12 && now.getHours() < 13){
    block3.classList.remove('now');
    block4.classList.add('now');
  }
  if(now.getHours() >= 13 && now.getHours() < 14){
    block5.classList.remove('now');
    block6.classList.add('now');
  }
  if(now.getHours() >= 14 && now.getHours() < 15){
    block6.classList.remove('now');
    block7.classList.add('now');
  }
  if(now.getHours() >= 15 && now.getHours() < 16){
    block7.classList.remove('now');
    block8.classList.add('now');
  }
   if(now.getHours() >= 01 && now.getHours() < 23){
    block8.classList.remove('now');
    block9.classList.add('now');
  }

})();

CSS.

#test.now{
  background: green;
}
#test{
  background: red;
}
#test1.now{background: green;}
#test1 {background: red;}
#test2.now{background: green;}
#test2 {background: red;}
#test3.now{background: green;}
#test3 {background: red;}
#test4.now{background: green;}
#test4 {background: red;}
#test5.now{background: green;}
#test5 {background: red;}
#test6.now{background: green;}
#test6 {background: red;}
#test7.now{background: green;}
#test7 {background: red;}
#test8.now{background: green;}
#test8 {background: red;}
#test9.now{background: green;}
#test9 {background: red;}

Если теперь добавим еще один элемент DIV

Пример

<div id="test9">17</div>
<div id="test9">17</div>

То сразу выдает ошибку JS. Вот ссылка На код с Ошибкой. [https://jsfiddle.net/pkgzwct6/51/][2]

Помогите разобраться...

6
  • "выбрать все classList.add" ??
    – user176262
    25 июн 2017 в 13:38
  • я бы советовал id делать уникальным на странице иначе, я вообще не понимаю, зачем оно надо... 25 июн 2017 в 13:40
  • он должен выбрать все по функции 25 июн 2017 в 13:42
  • Не могу сделать уникальный это слайдер.... 25 июн 2017 в 13:43
  • код выдает ошибку из-за того что const block9 = test9; ета вот строка предполагает наличие уникального id 25 июн 2017 в 13:51

1 ответ 1

0

Должно получится как-то так ?

const block1 = document.getElementsByClassName('test1')[0];
const block2 = document.getElementsByClassName('test2')[0];
const block3 = document.getElementsByClassName('test3')[0];
const block4 = document.getElementsByClassName('test4')[0];
const block5 = document.getElementsByClassName('test5')[0];
const block6 = document.getElementsByClassName('test6')[0];
const block7 = document.getElementsByClassName('test7')[0];
const block8 = document.getElementsByClassName('test8')[0];
const block9 = document.getElementsByClassName('test9');
const block = document.getElementsByClassName('test')[0];
calculate_timeout = seconds => {
    now = new Date(), next = new Date();
    next.setSeconds(seconds);
    if (next.getTime() <= now.getTime())
      next.setMinutes(next.getMinutes() + 1);
    return next.getTime() - now.getTime();
  }
  (function timer_callback() {
    let now = new Date;
    if (now.getHours() >= 06 && now.getHours() < 09) {
      block.classList.add('now');
      block9.classList.remove('now');
    }
    if (now.getHours() >= 09 && now.getHours() < 10) {
      block.classList.remove('now');
      block1.classList.add('now');
    }
    if (now.getHours() >= 10 && now.getHours() < 11) {
      block1.classList.remove('now');
      block2.classList.add('now');
    }
    if (now.getHours() >= 11 && now.getHours() < 12) {
      block2.classList.remove('now');
      block3.classList.add('now');
    }
    if (now.getHours() >= 12 && now.getHours() < 13) {
      block3.classList.remove('now');
      block4.classList.add('now');
    }
    if (now.getHours() >= 13 && now.getHours() < 14) {
      block5.classList.remove('now');
      block6.classList.add('now');
    }
    if (now.getHours() >= 14 && now.getHours() < 15) {
      block6.classList.remove('now');
      block7.classList.add('now');
    }
    if (now.getHours() >= 15 && now.getHours() < 16) {
      block7.classList.remove('now');
      block8.classList.add('now');
    }
    if (now.getHours() >= 01 && now.getHours() < 23) {
      block8.classList.remove('now');
      for(var i = 0; i < block9.length; i++){
	    block9[i].classList.add('now');
      }  
    }

  })();
.test.now {
  background: green;
}

.test {
  background: red;
}

.test1.now {
  background: green;
}

.test1 {
  background: red;
}

.test2.now {
  background: green;
}

.test2 {
  background: red;
}

.test3.now {
  background: green;
}

.test3 {
  background: red;
}

.test4.now {
  background: green;
}

.test4 {
  background: red;
}

.test5.now {
  background: green;
}

.test5 {
  background: red;
}

.test6.now {
  background: green;
}

.test6 {
  background: red;
}

.test7.now {
  background: green;
}

.test7 {
  background: red;
}

.test8.now {
  background: green;
}

.test8 {
  background: red;
}

.test9.now {
  background: green;
}

.test9 {
  background: red;
}
<div class="test1">9</div>
<div class="test2">10</div>
<div class="test3">11</div>
<div class="test4">12</div>
<div class="test5">13</div>
<div class="test6">14</div>
<div class="test7">15</div>
<div class="test8">16</div>
<div class="test9">17</div>
<div class="test9">17</div>
<div class="test">test</div>

4
  • но а как его заставить срабатывать сразу на все элементы ? 25 июн 2017 в 14:09
  • я не совсем понимаю, что именно вам надо, можно плиз больше подробностей ? Вам нужно чтобы все дивы в данном примере меняли цвет ? 25 июн 2017 в 14:10
  • Нет. В твоем примере он выделяет только первый Див. а мне нужно что-бы он выделил все дивы с классом test9 25 июн 2017 в 14:12
  • посмотрите мой пример еще раз, я там вносил правки 15 мин назад, чтобы он выделял все дивы с классом test9 25 июн 2017 в 14:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.