如何不使用toggleClass()而不使用toggleClass()

Question

到目前为止，我的情况如下：

function highlighton(id1, id2) {
document.getElementById(id1).classList.add('highlight');
document.getElementById(id2).classList.add('highlight');
}

function highlightoff(id1, id2) {
document.getElementById(id1).classList.remove('highlight');
document.getElementById(id2).classList.remove('highlight');
}

以及HTML代码：

<span id="f000020" onmouseover="highlighton('f000020', 'f000020t')" onmouseout="highlightoff('f000020', 'f000020t')">It is impossible to say how first the idea entered my brain;</span>

<span id="f000020t" onmouseover="highlighton('f000020', 'f000020t')" onmouseout="highlightoff('f000020', 'f000020t')">Es imposible decir cómo es que por vez primera la idea entró a mi cerebro;</span>

JSFiddle供进一步参考。

这个想法是，如果您悬停在英文id span或西班牙id span上，它将同时改变两者的背景。对于不引人注目的需求，它必须切换类，对于特定的构建限制，它不能使用jQuery。

Answer 1

在这种特殊情况下，您可能不需要.toggleClass()，因为您希望在鼠标移出时确保类被移除；某些奇怪的边缘情况不太可能打破切换状态。

function highlighton(id1, id2) {
    document.getElementById(id1).classList.add("highlight");
    document.getElementById(id2).classList.add("highlight");
}

function highlightoff(id1, id2) {
    document.getElementById(id1).classList.remove("highlight");
    document.getElementById(id2).classList.remove("highlight");
}

确保这些函数是在全局范围中定义的，否则不能从内联JavaScript中使用它们。更好的做法是使用.addEventListener()注册代码中的事件处理程序(不过，请注意使用.attachEvent()的IE <9浏览器)。

演示