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

回答

相關問題