1

Есть например 4 блока с классом .box, по клику на каждый должен добавляться класс .bg, если такой класс уже есть, то соответственно удаляться

Для модератора: этот вопрос слегка отличается тем что консоль не выдает ошибки, но тут суть больше в решениях, т.е. ответы получились разнообразней, кому то будет все понятно там где в пару строчек код, а кому то там где мой исправили(понял логически теперь где натупил), я просмотрел ту тему и там ответ не помог мне понять саму логику ошибки т.к. код ответа в корне отличается, к тому же тут еще есть разметка и стили и замечательная штука "Выполнить код", где сразу наглядно можно увидеть что этот код делает.

var box = document.querySelectorAll('.box');
box.onclick = function() {
  for (var i = 0; i < box.length; i++) {
    if (box[i].classList.contains('bg')) {
      box[i].classList.remove('bg');
    } else {
      box[i].classList.add('bg');
    }
  }
}
.wrap {
  display: flex;
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}

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

0

2 ответа 2

2

document.querySelectorAll('.box').forEach(el => {
  el.onclick = function() { this.classList.toggle('bg'); };
});
.wrap {
  display: flex;
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}

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


Первая ошибка в том, что назначается onclick коллекции элементов, у которой такого события нет. Надо назначать onclick каждому элементу.

var boxes = document.querySelectorAll('.box');
for (var iBox = 0; iBox < boxes.length; iBox++) {
  boxes[iBox].onclick = function() {
    if (this.classList.contains('bg')) {
      this.classList.remove('bg');
    } else {
      this.classList.add('bg');
    }
  }
}
.wrap {
  display: flex;
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}

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

2
  • Результат такой как я хотел, только если вас не затруднит, можно мой вариант подправить чтобы работал ? хочется понять где налажал, Ваш вариант мне пока еще сложен для восприятия
    – IgorDas
    25 фев 2019 в 0:02
  • теперь понял как оно строится, спасибо большое
    – IgorDas
    25 фев 2019 в 10:23
0

// Ищеим все классы box
var boxes = document.querySelectorAll('.box');
//Проходим по каждому найденному
boxes.forEach(function(box){
  //присваиваем функцию для события click
  box.onclick = function() {
      //если у элемента, по которому нажали есть класс bg ? делаем, инача : делаем
      this.classList.contains('bg') ? this.classList.remove('bg') : this.classList.add('bg');
  }
});
.wrap {
    display: flex;
}
.box {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
}
.bg {
    background-color: green;
}
<div class="wrap">
  <div class="box bg"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Ваш ответ

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

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