動態顯示/隱藏div與javascript不工作

我有一個基本的顯示/隱藏JavaScript工作，只要我不使它動態，並確保一個參數。如果有人能幫我弄清爲什麼動態版本不起作用，我將非常感激。動態顯示/隱藏div與javascript不工作

工作代碼：
的JavaScript

function togglesDiv(){ 
    var catdiv = document.getElementById("addNewCat"); 
    if(catdiv.style.display == ""){ 
    catdiv.style.display = "none"; 
    } else { 
    catdiv.style.display = ""; 
    } 
}

HTML

<span onclick="togglesDiv();">Add new category</span> 
<div id="addNewCat" style="display: none;"> 
lalala 
</div>

非工作代碼：
的JavaScript

function togglesDiv(divsId){ 
    var catdiv = document.getElementById("divsId"); 
    if(catdiv.style.display == ""){ 
    catdiv.style.display = "none"; 
    } else { 
    catdiv.style.display = ""; 
    } 
}

HTML

<span onclick="togglesDiv(addNewCat);">Add new category</span> 
<div id="addNewCat" style="display: none;"> 
lalala 
</div>

來源

2010-08-10 Poppe76

你有一個變量名包在字符串分隔符，使其成爲一個字符串，而不是一個變量。更改

var catdiv = document.getElementById("divsId");

要

var catdiv = document.getElementById(divsId);

在另一面，則調用該函數需要報價在它的參數（因爲它應該是一個字符串），你可以使用單引號，以避免衝突：

<span onclick="togglesDiv('addNewCat');">Add new category</span>

來源

2010-08-10 14:56:25

這是正確的答案。當你在divsId附近添加引號時，它使它成爲一個值爲divsId的字符串，這意味着它正在尋找具有該id的div。如果沒有引號，它會查找名爲divsId – 2010-08-10 15:00:10

Doh :)的字符串變量的值。謝謝並感謝所有其他人:) – Poppe76 2010-08-10 16:35:23

刪除引號：

var catdiv = document.getElementById("divsId");

變爲

var catdiv = document.getElementById(divsId);

你沒有一個元素與「divsId」的ID。

在完全不相關的說明中，您不能確定catdiv.style.display在可見光時總是等於""。還有其他樣式會導致它顯示（例如，「內聯」，「塊」）。

一個更好的解決方案可能是：

function togglesDiv(divsId){ 
    var catdiv = document.getElementById("divsId"); 
    if(catdiv.style.display === "none"){ 
    catdiv.style.display = ""; 
    } else { 
    catdiv.style.display = "none"; 
    } 
}

（是的，我的意思是把三聯平等===中）

來源

2010-08-10 14:56:28

請記住，* element.style.display *與內嵌樣式等效，不受影響通過CSS規則。如果你完全控制了腳本和標記，那麼你可以確定'element.style.display =='「'如果你還沒有修改它。這就是說，最好檢查*「none」*而不是*「」*。 – 2010-08-10 15:04:37

您的代碼正在尋找與ID一格「divsId」變化您的代碼爲：

function togglesDiv(divsId){ 
     var catdiv = document.getElementById(divsId); 
     if(catdiv.style.display == ""){ 
     catdiv.style.display = "none"; 
     } else { 
     catdiv.style.display = ""; 
     } 
    }

來源

2010-08-10 14:57:34 JKirchartz

因爲您正在尋找名爲「divsId」的div而不是變量divsId中的值。刪除演講標記！從 var catdiv = document.getElementById("divsId");

來源

2010-08-10 14:57:50 Woody

刪除引號應該是 var catdiv = document.getElementById(divsId);

並添加引號：

<span onclick="togglesDiv(addNewCat);">Add new category</span>

應該

<span onclick="togglesDiv('addNewCat');">Add new category</span>

來源

2010-08-10 15:01:39 giker

改進功能

function toggleDisplay(id){ 
    var el = document.getElementById(id); 
    if(!el) return true; 
    // feature detect to support IE versions. 
    var dis = 'currentStyle' in el ? el.currentStyle.display : el.style.display; 
    // toggle display 
    el.style.display = /none/i.test(dis) ? '' : 'none'; 
    // prevent memory leak 
    el = null; 
}

而且如上所述，在編寫糟糕的內聯JavaScript時需要引號。

<span onclick="toggleDisplay('addNewCat')"> ... etc

Tbh。選擇一個js工具包/庫，並使用它重新發明自己的車輪，並停止編寫內聯javascript，你的生活和快樂將大大提高，如果你這樣做= P

來源

2010-08-10 15:12:10 BGerrissen

* currentStyle *和* style *不一樣，所以你會遇到瀏覽器之間的不一致。 * window.getComputedStyle（）*是替代* currentStyle *的標準。 – 2010-08-10 15:49:57

ya我主要使用jquery，但這在個人後端系統中只是一件小事，所以我沒有看到使用更大的東西的重點。 – Poppe76 2010-08-10 16:37:32

動態顯示/隱藏div與javascript不工作

回答

相關問題