2
<div class="lamp">
    <div class="optic" id="op_1"></div>
    <div class="optic" id="op_2"></div>
    <div class="optic" id="op_3"></div>
    </div>
<script>
var opt =[document.getElementById('op_1'),document.getElementById('op_2'),document.getElementById('op_3')];
var col =["red","yellow","green","grey"];
var i;
if (true){
    opt[0]=col[0]
}
  else{
    opt[1,2]=col[3]
  }
  opt[i]=style.background.col[i]
</script>
4
  • мне просто в цикле надо часто менять цвета, в моем варианте хотелось что бы к id первого массива присваивался цвет второго 2 мар 2018 в 13:18
  • ну так и напишите ``` if (i === 0) { item.style.background = color[1]; }``` В чем сложность то? 2 мар 2018 в 13:43
  • можно конечно и без массивов document.getElementById('op_1').style.background = "red"; но когда перебираешь в цикле множество вариантов и допустим 4 цвета должны постоянно меняться в зависимости от условия, то хотелось что бы код был покороче т е предпочтительнее массив 2 мар 2018 в 13:57
  • добавил в код проверку на ID if (item.id === 'op_1') { item.style.background = color[1]; } 2 мар 2018 в 14:10

1 ответ 1

1

ES5

var opt = document.querySelectorAll('.optic');
var color =["red","yellow","green","grey"];

opt.forEach(function(item, i) {
    if (i === 0 || i === 1) {
        item.style.background = color[3];
        return;
    }

    item.style.background = color[i];
});

ES6

let opt = document.querySelectorAll('.optic');
let color =["red","yellow","green","grey"];

opt.forEach((item, i) => {
    if (i === 0 || i === 1) {
        item.style.background = color[3];
        return;
    }

    item.style.background = color[i];
});

То есть мы забираем все элементы по классу, а не по ID отдельно каждый. Проходимся в цикле по массиву. Осуществляем проверку на индекс элемента цикла и выдаем нужный цвет background. Переходим на следующую итерацию, если условие выполнено при помощи return.

Если условие не выполнено, то присваиваем цвет соответствующий индексу.

Вариант с проверкой на id (также внутри цикла)

if (item.id === 'op_1') {
    item.style.background = color[1];
    return;
}

Для наглядности можете посмотреть по клику что происходит

let opt = document.querySelectorAll('.optic');
let color =["red","yellow","green","grey"];

opt.forEach((item, i) => {
    item.addEventListener('click', () => {
      if (i === 0 || i === 1) {
          item.style.background = color[3];
          return;
      }

      item.style.background = color[i];
    })
});
<div class="lamp">
    <div class="optic" id="op_1">Будет серый</div>
    <div class="optic" id="op_2">Будет серый</div>
    <div class="optic" id="op_3">Будет зеленый</div>
 </div>

5
  • Перепроверьте свой ES5 код.Также не забывайте, что итерировать NodeList при помощи .forEach выйдет не во всех браузерах, перед этим его надо конвертировать в массив. 2 мар 2018 в 13:29
  • @SashaOmelchenko спасибо за поправочку. Исправил. Какие современные браузеры не умеют NodeList перебирать forEach? 2 мар 2018 в 13:41
  • Фишка в том, что есть не только современные браузеры, вот ИЕ не поддерживает такое, например. 2 мар 2018 в 14:56
  • @Sasha Omelchenko - все IE, или те которые 6, 7, 8, 9. Все, что ниже 10 - это уже не должно поддерживаться никакими разработчиками. 2 мар 2018 в 15:01
  • Судя по developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach ИЕ не поддерживает этот метод вообще. Ну а так то я согласен ) 2 мар 2018 в 15:56

Ваш ответ

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

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