-1

Как сделать так, чтобы при нажатие на один div добавлялся класс у div на который нажал и соседние div с одинаковыми классами .

var box = document.getElementsByClassName('box');
for (var i = 0; i < box.length; i++) {
  box[i].onclick = function() {
    for (var x = i; x <= i + 3; x++) {
      i++;
      box[i].classList.add('life');
    }
  }
}
.box {
  width: 18px;
  height: 18px;
  border: 1px solid red;
  background-color: grey;
}

.life {
  background-color: green;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
  

2
  • 1
    Измените заголовок вопроса на "Как изменить при клике класс элемента"; Оставьте 5 div'ов, этого будет достаточно;
    – XelaNimed
    4 дек 2018 в 13:58
  • jsfiddle.net/XelaNimed/4zxh0fq2
    – XelaNimed
    4 дек 2018 в 14:17

1 ответ 1

3

function addClass(elements) {
  elements.forEach(function(el) {
    if (el) el.classList.add('life')
  })
}

var boxes = document.querySelectorAll('.box')
boxes.forEach(function(el, index) {
  el.addEventListener('click', function click() {
    var prevEl = boxes[index - 1]
    var currEl = boxes[index]
    var nextEl = boxes[index + 1]
    addClass([currEl, prevEl, nextEl])
  })
})
.box {
    width: 18px;
    height: 18px;
    border: 1px solid red;
    background-color: grey;
}

.life {
    background-color: green;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Ваш ответ

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

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