Блог

Главная - Вопросы по программированию - Я не могу удалить класс, в чем ошибка?

Я не могу удалить класс, в чем ошибка?

#javascript

#javascript

Вопрос:

Привет, мой код не добавляет «активный» класс. Пожалуйста, скажи мне. изначально все они должны быть неактивными. я разместил это здесь https://jsfiddle.net/fjmy7ce0/2 / я получаю сообщение в консоли «Не удается прочитать свойство ‘removeClass’ с нулевым значением»

 let items = document.querySelector('.color__items');
  let item = document.querySelectorAll('.color__item');

  item.forEach(el => {
    el.addEventListener('click', function(){
      items.querySelector('.active').classList.
          remove('active');

          el.classList.add('active');
    });
  });

Комментарии:

1. Дэвид говорит восстановить Монику, я не нашел ответа, у меня все еще есть активный класс, и он не удален

Ответ №1:

Вы были почти на месте. Вам просто нужно использовать querySelectorAll для всех элементов и сначала нажать удалить classes из всех elements

Затем вам нужно event.target добавить класс только к clicked элементу.

Живая рабочая демонстрация:

 let item = document.querySelectorAll('.color__item');

item.forEach(el => {
  el.addEventListener('click', function(e) {
    item.forEach(el => {
      el.classList.remove('active') //remove classes from all
    });
    e.target.classList.add('active') //add Class to the clicked element
  });
});  
 .color__items {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 55px;
  border-radius: 15px;
  background-color: rgb(31, 33, 44);
  margin-bottom: 60px;
}

.color__item {
  width: 26px;
  height: 26px;
  border-radius: 35%;
  border: none;
  cursor: pointer;
  opacity: 0.5;
  transition: all .3s;
}

.color__item:hover {
  opacity: 1;
}

.color__item-title {
  font-size: 21px;
  margin-bottom: 20px;
}

.color__item-black {
  background-color: #000000;
}

.color__item-white {
  background-color: #fefefe;
}

.color__item-red {
  background-color: #f50818;
}

.color__item-purple {
  background-color: #f508e7;
}

.color__item-blue {
  background-color: #2f08f5;
}

.color__item-lightblue {
  background-color: #08cbf5;
}

.color__item-green {
  background-color: #08f524;
}

.color__item-yellow {
  background-color: #e1f508;
}

.color__item-orange {
  background-color: #f58e08;
}

.color__item.active {
  opacity: 1;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="color__items">
  <button class="color__item color__item-black" type="button"></button>
  <button class="color__item color__item-white" type="button"></button>
  <button class="color__item color__item-red" type="button"></button>
  <button class="color__item color__item-purple" type="button"></button>
  <button class="color__item color__item-blue" type="button"></button>
  <button class="color__item color__item-lightblue" type="button"></button>
  <button class="color__item color__item-green" type="button"></button>
  <button class="color__item color__item-yellow" type="button"></button>
  <button class="color__item color__item-orange" type="button"></button>
</div>

Ответ №2:

В вашем внешнем фрагменте jsfiddle у вас возникла проблема с вашим CSS:

   .color__item-orange{
    background-color: #f58e08;
  }
} <=== SUPERFLUOUS bracket!!!
.color__item.active{
  opacity: 1;
}

Ваши add и remove классы могут быть заменены простым toggle . Это также сокращает код.

Ниже вы можете увидеть мою исправленную версию:

 const item = [...document.querySelectorAll('.color__item')];
// delegated event attachment to the parent container:
document.querySelector('.color__items').addEventListener('click', ev=>
  item.forEach(el=>el.classList.toggle('active', el==ev.target))
)  
 .active {background-color:red}.color__items{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 55px;
  border-radius: 15px;
  background-color: rgb(31, 33, 44);
  margin-bottom: 60px;
}
.color__item{ width: 26px; height: 26px; border-radius: 35%;
  border: none; cursor: pointer; opacity: 0.5; transition: all .3s;
 }
 .color__item:hover{ opacity: 1; }
 .color__item-title{ font-size: 21px; margin-bottom: 20px; }
  color__item-black{ background-color: #000000; }
 .color__item-white{ background-color: #fefefe; }
 .color__item-red{   background-color: #f50818; }
 .color__item-purple{background-color: #f508e7; }
 .color__item-blue{  background-color: #2f08f5; }
 .color__item-lightblue{background-color: #08cbf5;}
 .color__item-green{ background-color: #08f524; }
 .color__item-yellow{background-color: #e1f508; }
 .color__item-orange{background-color: #f58e08; }
 .active{ opacity: 1 }  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="color__items">
 <button class="color__item color__item-black" type="button"></button>
 <button class="color__item color__item-white" type="button"></button>
 <button class="color__item color__item-red" type="button"></button>
 <button class="color__item color__item-purple" type="button"></button>
 <button class="color__item color__item-blue" type="button"></button>
 <button class="color__item color__item-lightblue" type="button"></button>
 <button class="color__item color__item-green" type="button"></button>
 <button class="color__item color__item-yellow" type="button"></button>
 <button class="color__item color__item-orange" type="button"></button>
</div>