Question

很抱歉，这个问题令人困惑–我是JavaScript的新手，正在为如何提出这个问题而苦苦挣扎...这是我想出的理想结果：

将Foo按下鼠标时，我想给所有Bars一个类，然后在Foo按下鼠标时删除该类。我很确定解决方案将使用{ {1}}和tenant-1 tenant-3，但据我所知。让我知道是否需要进一步说明，如果这是重复的事，请提前抱歉。

querySelectorAll

forEach

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

将鼠标放在具有类的任何元素上，会影响具有不同类的所有元素

1 个答案:

JSFiddle