javascript - 在 mouseenter 上，添加类，但删除所有其他类

Question

我有一个 div 容器，有 4 个子 p。当您mouseenter p 时，您向父容器添加了一个类。但是，我希望该类保留在父容器中，直到我 mouseenter 另一个 p。如何使用纯 Javascript 执行此操作？

我试过使用 mouseout，但一旦我退出 p 元素，它就会从容器中删除该类。在添加类(class)之前，我也尝试了以下方法，但我仍然没有得到我正在寻找的效果。

container.classList.remove("p"+ i + "-transform");

var container = document.querySelector(".container");
var p = document.querySelectorAll("p");

var enterMouse = function(i) {
  p[i].addEventListener("mouseenter", function() {
    if (i === 0) {
      container.classList.remove("p" + i + "-transform"); // doesn't work
      container.classList.add("p0-transform");
    } else if (i === 1) {
      container.classList.remove("p" + i + "-transform"); // doesn't work
      container.classList.add("p1-transform");
    } else if (i === 2) {
      container.classList.remove("p" + i + "-transform"); // doesn't work
      container.classList.add("p2-transform");
    } else if (i === 3) {
      container.classList.remove("p" + i + "-transform"); // doesn't work
      container.classList.add("p3-transform");
    }
  });
}

for (i = 0; i < p.length; i++) {
  enterMouse(i);
}

.p0-transform {
  background-color: red;
}

.p1-transform {
  background-color: green;
}

.p2-transform {
  background-color: orange;
}

.p3-transform {
  background-color: blue;
}

<div class="container">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
</div>

Answer 1

您可以使用 classList.remove() 删除多个类, 即使它们不存在于元素中，所以只需将它们全部传递给 .remove() 即可将它们全部删除.

您还可以删除冗余代码，因为 i在执行 .add() 时可用于连接到类中.

var container = document.querySelector(".container");
var p = document.querySelectorAll("p");
var classes = [].map.call(p, function(_, i) { return "p" + i + "-transform" })

function enterMouse(i) {
  p[i].addEventListener("mouseenter", function() {
    container.classList.remove.apply(container.classList, classes);
    container.classList.add("p" + i + "-transform");
  });
}

for (var i = 0; i < p.length; i++) {
  enterMouse(i);
}

.p0-transform {
  background-color: red;
}

.p1-transform {
  background-color: green;
}

.p2-transform {
  background-color: orange;
}

.p3-transform {
  background-color: blue;
}

<div class="container">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
</div>

如果 container 上永远不会有任何其他类, 然后你可以简单地清除 .className属性(property) container.className = ""

---

以下是我编写具有现代功能和一些额外调整的代码的方式:

const container = document.querySelector(".container");
const classes = Array.from(document.querySelectorAll("p"), function(el, i) {
  const cls = "p" + i + "-transform";

  el.addEventListener("mouseenter", function() {
    container.classList.remove(...classes);
    container.classList.add(cls);
  });

  return cls;
});