Question

我仍然习惯于使用普通的JavaScript，并创建一组基本的方形div，这些div在单击时会添加和删除类。我使用的数组将添加其中一个特定的类。单击时，我想在添加新类之前删除所有这些类。因此，例如，当单击第二个正方形时，“ classB”将仅添加到该正方形，然后单击其他任何一个将其删除。

我了解到classList.remove必须在classList.add之前，但是由于某些原因它无法正常工作。我总是收到消息“无法读取HTMLDivElement.elem.addEventListener的未定义属性'remove'”。

但是，如果我使用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>

在这里和其他站点，我已经浏览了许多其他问题，但并没有真正看到它。

Answer 1

您要比较的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>

为什么classList.remove不起作用，但是jQuery .removeClass是起作用的？

1 个答案: