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

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.toggle

HTML

<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() {

    document.querySelectorAll('.bar').forEach(elm => elm.classList.toggle("baz"))

}

function removeClass() {

    document.querySelectorAll('.bar.baz').forEach(elm => elm.classList.toggle("baz"))

}

订阅

document.querySelectorAll('.foo').forEach(elm=> {

    elm.onmouseenter = addClass

    elm.onmouseleave = removeClass

})

您甚至可以使用更短的方法并为两者调用相同的回调（假设您在回调中没有任何其他逻辑

function toggleClass() {

    document.querySelectorAll('.bar').forEach(elm => elm.classList.toggle("baz"))

}

document.querySelectorAll('.foo').forEach(elm=> {

    elm.onmouseenter = toggleClass

    elm.onmouseleave = toggleClass

})

参见JSFiddle