鼠标按下任何具有类的元素，影响具有不同类的所有元素

Question

抱歉，如果这个问题令人困惑——我是 JavaScript 的新手，甚至不知道如何提出这个问题……这是我想出的理想结果：

当任何 Foo 被鼠标按下时，我想给所有 Bars 一个类，然后当 Foo 被鼠标按下时删除该类。我很确定该解决方案会使用querySelectorAll，forEach但这是我所得到的。让我知道这是否需要更多说明，如果这是重复的，请提前致歉。

<div class="foo">When I mousedown/up on this</div>

<div class="foo">When I mousedown/up on this</div>

<div class="bar">Give/remove the 'baz' class to/from this</div>

<div class="bar">Give/remove the 'baz' class to/from this</div>

.foo {

  color: blue;

}

.bar {

  color: red;

}

.baz {

  color: green;

}

Answer 1

JSFiddle你需要使用document.querySelectorAll和classList.toggleHTML<div class="foo">When I mousedown/up on this</div><div class="foo">When I mousedown/up on this</div><div class="bar">Give/remove the 'baz' class to/from this</div><div class="bar">Give/remove the 'baz' class to/from this</div>事件function addClass() {&nbsp; &nbsp; document.querySelectorAll('.bar').forEach(elm => elm.classList.toggle("baz"))}function removeClass() {&nbsp; &nbsp; document.querySelectorAll('.bar.baz').forEach(elm => elm.classList.toggle("baz"))}订阅document.querySelectorAll('.foo').forEach(elm=> {&nbsp; &nbsp; elm.onmouseenter = addClass&nbsp; &nbsp; elm.onmouseleave = removeClass})您甚至可以使用更短的方法并为两者调用相同的回调（假设您在回调中没有任何其他逻辑function toggleClass() {&nbsp; &nbsp; document.querySelectorAll('.bar').forEach(elm => elm.classList.toggle("baz"))}document.querySelectorAll('.foo').forEach(elm=> {&nbsp; &nbsp; elm.onmouseenter = toggleClass&nbsp; &nbsp; elm.onmouseleave = toggleClass})参见JSFiddle