Почему classList.remove не работает, а jQuery .removeClass работает? - PullRequest
Новая
       12

Почему classList.remove не работает, а jQuery .removeClass работает?

0 голосов
/ 26 февраля 2019

Я все еще привыкаю к ​​простому JavaScript и создаю базовый набор элементов квадратной формы, которые будут добавлять и удалять классы при нажатии.Я использую массив, который добавит конкретный из этих классов.При нажатии я хотел бы удалить все эти классы перед добавлением нового.Так, например, при нажатии на 2-й квадрат, 'classB' будет добавлен только к этому, а затем щелчок по любым другим удалит его.

Я понимаю, что classList.remove должно быть до classList.add, но по какой-то причине он не работает.Я всегда получаю сообщение "Не удается прочитать свойство 'удалить' из неопределенного в HTMLDivElement.elem.addEventListener".

Однако, если я использую jQuery. removeClass, это работает без проблем.Но я бы предпочел не использовать jQuery.

Вот фрагмент.Вы можете увидеть classList.remove, что я пробовал в том, что закомментировано. 

const addClass = ['classA','classB','classC','classD'];
const numbers = [0,1,2,3];
const square = document.querySelectorAll('.square');

square.forEach((elem, i) => {

  elem.addEventListener('click', () => {

    //square[i].classList.remove(...addClass)
    $(square).removeClass('classA classB classC classD');

    if (i == numbers[i]) {
      elem.classList.add(addClass[i]);
    }
  });
});
.square {
width: 2rem;
height: 2rem;
background-color: black;
margin: 1rem;
}

.classA { background-color: red; }
.classB { background-color: yellow; }
.classC { background-color: green; }
.classD { background-color: blue; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
</div>

Я просмотрел кучу других вопросов здесь и на других сайтах, но на самом деле не вижу его.

1 Ответ

0 голосов
/ 26 февраля 2019

2 сравниваемых вами метода не эквивалентны: 

square[i].classList.remove(...addClass)

Удалит все классы в массиве из одного элемента. 

$(square).removeClass('classA classB classC classD');

Удалит все эти классы из всех квадратов.

Чтобы сделать это без jQuery, вы можете сделать: 

square.forEach(elem => elem.classList.remove(...addClass));


const addClass = ['classA','classB','classC','classD'];
const numbers = [0,1,2,3];
const squares = document.querySelectorAll('.square');
// renamed square to squares so it's more obvious that it is a NodeList and not a single Node

squares.forEach((elem, i) => {

  elem.addEventListener('click', () => {

    squares.forEach(elem => elem.classList.remove(...addClass));

    if (i == numbers[i]) {
      elem.classList.add(addClass[i]);
    }
  });
});
.square {
width: 2rem;
height: 2rem;
background-color: black;
margin: 1rem;
}

.classA { background-color: red; }
.classB { background-color: yellow; }
.classC { background-color: green; }
.classD { background-color: blue; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
</div>
...