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跨度或西班牙语id跨度悬停，它将同时改变两者的背景。对于不显眼的要求，它必须切换类，并且对于特定的构建限制，它不能使用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＆lt; 9浏览器）

Demo

如何在没有jQuery的情况下使用toggleClass（）

1 个答案: