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

Question

我有一个div容器，有4个孩子p。当您mouseenter p时，您将一个类添加到父容器中。但是，我希望该类保留在父容器上，直到我mouseenter另一个p。我怎么能用纯Javascript做到这一点？

我尝试过使用mouseout，但只要退出p元素，它就会从容器中删除该类。在添加课程之前我也尝试了下面的内容，但我仍然没有得到我正在寻找的效果。

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

清除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;
});

Answer 2

您可以通过将其className属性设置为空字符串来完全转储元素的CSS类。

＆＃13;

＆＃13;

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

var enterMouse = function(i) {
  p[i].addEventListener("mouseenter", function() {
    if (i === 0) {
      container.className = ""; // works now
      container.classList.add("p0-transform");
    } else if (i === 1) {
      container.className = ""; // works now
      container.classList.add("p1-transform");
    } else if (i === 2) {
      container.className = ""; // works now
      container.classList.add("p2-transform");
    } else if (i === 3) {
      container.className = ""; // works now
      container.classList.add("p3-transform");
    }
  });
}

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

＆＃13;

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

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;