交错的陈述

Question

我有this代码 ^JSFiddle ，当你将鼠标悬停在单元格上时，列会改变颜色，但是，当你将鼠标移动到另一个单元格时，你可以看到颜色似乎以交错的方式恢复，有没有人知道为什么会这样，我不想要一个关于我的代码有多可怕的演讲。

处理取消突出显示的代码：

tables[i].onmouseout = function(e){
    var target;
    if(e.target.tagName.toLowerCase() == 'span') target = e.target.parentNode;
    else if(e.target.tagName.toLowerCase() == 'td') target = e.target;
    if(!target || target.innerHTML == ' ') return;
    target = document.getElementsByClassName('hcell');
    for(var i = 0; i < target.length; i++){
        target[i].className = target[i].className.replace(/\bhcell\b/,'');
    }
}

Answer 1

你的onmouseover逻辑中有一个错误，你正在添加hcell类十几次，然后你只删除其中一个，在你的小提琴中做了一个简短的测试导致了这个：

<td class="letter hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell hcell"><span class="tblsup">2</span>D</td>

考虑使用jQuery让你的生活变得更轻松。