Блог

Главная - Вопросы по программированию - удаление класса из элемента, когда класс переходит в другой в javascript

удаление класса из элемента, когда класс переходит в другой в javascript

#javascript #html

Вопрос:

во-первых, извините, если вы не понимаете названия

У меня есть список, содержащий элементы, как только я нажимаю на элемент, класс «s» должен быть добавлен в него и удален из других, которые я пытаюсь удалить по циклу, но не сработало

 function selectIt(x) {
  x.classList.add('s');
  var items = document.querySelectorAll('item');
  for (i = 0; i < items.length; i  ) {
    items[i].classList.remove('s');
  }
} 
 .s {
  background: red;
} 
 <div class="list">
  <div class="item" onclick="selectIt(this)">item 1</div>
  <div class="item s" onclick="selectIt(this)">item 2</div>
  <div class="item" onclick="selectIt(this)">item 3</div>
  <div class="item" onclick="selectIt(this)">item 4</div>
  <div class="item" onclick="selectIt(this)">item 5</div>
</div>

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

1. поместите свой x.classList.add('s'); после вашего цикла for

Ответ №1:

Вы не определяете тип селектора, querySelectorAll как если бы вы хотели искать класс или идентификатор. Добавьте s класс в конце, а не в начале, так как определение его в начале также удалит s класс из текущего элемента.

Кроме того, вы можете искать s класс в поле «Запрос» вместо поиска элемента.

 function selectIt(x) {
  var items = document.querySelectorAll('.s');
  for (i = 0; i < items.length; i  ) {
    items[i].classList.remove('s');
  }
  x.classList.add('s');
} 
 .s {
  background: red;
} 
 <div class="list">
  <div class="item" onclick="selectIt(this)">item 1</div>
  <div class="item s" onclick="selectIt(this)">item 2</div>
  <div class="item" onclick="selectIt(this)">item 3</div>
  <div class="item" onclick="selectIt(this)">item 4</div>
  <div class="item" onclick="selectIt(this)">item 5</div>
</div>

Ответ №2:

Вам вообще не нужно запускать цикл. Сначала удалите класс s из предыдущего div элемента и добавьте его в новый div элемент, на который нажата кнопка.

 function selectIt(x) {
  let item = document.querySelector('.s');
  item.classList.remove('s')
  x.classList.add('s');
} 
 .s {
  background: red;
} 
 <div class="list">
  <div class="item" onclick="selectIt(this)">item 1</div>
  <div class="item s" onclick="selectIt(this)">item 2</div>
  <div class="item" onclick="selectIt(this)">item 3</div>
  <div class="item" onclick="selectIt(this)">item 4</div>
  <div class="item" onclick="selectIt(this)">item 5</div>
</div>

Ответ №3:

Ты можешь сделать это вот так

 function selectIt(x) {
            var elements = document.getElementsByClassName('item');
            for (var i = 0; i < elements.length; i  ) {
                elements[i].style.backgroundColor = 'white';
            }
            x.style.backgroundColor = "red"
        } 
 <div class="list">
        <div class="item" onclick="selectIt(this)">item 1</div>
        <div class="item" onclick="selectIt(this)">item 2</div>
        <div class="item" onclick="selectIt(this)">item 3</div>
        <div class="item" onclick="selectIt(this)">item 4</div>
        <div class="item" onclick="selectIt(this)">item 5</div>
    </div>

В принципе, сначала я сделал цвет фона элемента класса = белый
, затем я сделал фон «этого» красным

Метки: ,