javascript hide show

我想在javascript中做一个简单的隐藏和显示功能（而不是jQuery的请，我想学习）;是的，我还在学习。我试图做的是Facebook和其他应用程序，当您将鼠标悬停在新闻Feed文章上时，会有一个小X显示可用作删除该文件的选项。在这里，我尝试这样做，对表（表格单元格）javascript hide show

是我的头功能：

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>';

来源

2011-05-15 user657896

仅供参考，我不认为你将能够点击X，因为它是比一个不同的细胞鼠标进/出事件。每当您离开单元格时，都会选择相册 - >媒体输出点击X，您将调用鼠标输出功能。事件处理程序可能应该为tr定义...如果tr可以处理该事件。 – Vinnyq12 2011-05-15 18:15:27

哦，是的，我把它移动到一个单元格，因为我认为代码只是不能在的工作。我把它移回到tr – user657896 2011-05-15 18:33:31

功能是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'; 
}

另外，还可以缩短一点，并检查以确保一个埃尔EMENT发现这样的：

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

来源

2011-05-15 18:05:49 user113716

谢谢omg。在深夜工作需要付出代价......代码的最小化也是很好的建议。让我学习好的做法 – user657896 2011-05-15 18:11:40

@user：不客气。 – user113716 2011-05-15 18:12:57

好吧，如果你真的想隐藏它，而不是仅仅删除它的内容，你应该使用：

document.getDocumentById(id).style.display = 'none';

，并显示出它（TDS），使用：

document.getDocumentById(id).style.display = 'table-cell';

http://www.w3schools.com/cssref/pr_class_display.asp

来源

2013-08-13 16:40:19

javascript hide show

回答

相关问题