javascript隐藏显示

Question

我正在尝试在 javascript 中做一个简单的隐藏和显示功能(请不要使用 Jquery，我想学习)；是的，我还在学习。我正在尝试做的是 Facebook 和其他应用程序，当您将鼠标悬停在新闻提要文章上时，会有一个小 X 显示作为删除​​该文章的选项。我正在尝试在表格(表格单元格)上这样做

这是我的头函数:

function showHide(id) {
    if(document.getDocumentById(id).style.visibility == 'hidden')
        document.getDocumentById(id).style.visibility = 'visible';
    else
        document.getDocumentById(id).style.visibility = 'hidden';
}

在正文中(php):

echo '<tr>';
        echo '<td class="managealbum_delete" id="managealbum_delete'.$x.'">X</td>';
        echo '<td>' . $album->title . '</td>';
        echo '<td>' . $album->caption . '</td>';
        echo '<td style="border: 1px solid black;" onMouseOver="showHide('."'".'managealbum_delete'.$x."'".');" onMouseOut="showHide('."'".'managealbum_delete'.$x."'".');">' . $album->media . '</td>';
        echo '</tr>';

Answer 1

函数是getElementById，不是getDocumentById

function showHide(id) { 
    if(document.getElementById(id).style.visibility == 'hidden')    
        document.getElementById(id).style.visibility = 'visible'; 
    else 
        document.getElementById(id).style.visibility = 'hidden'; 
}

此外，您可以将其缩短一点，并检查以确保找到一个元素，如下所示:

function showHide(id) {
    var el = document.getElementById(id);
    if( el && el.style.visibility == 'hidden')    
        el.style.visibility = 'visible'; 
    else 
        el.style.visibility = 'hidden'; 
}