1 回答

TA貢獻1802條經驗 獲得超6個贊
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
添加回答
舉報