javascript 不工作的动态显示/隐藏 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3450286/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamic show/hide div with javascript not working
提问by Poppe76
I have a basic show/hide javascript that works, as long as i don't make it dynamic and make sure of a parameter. I would appreciate a lot if anyone could help me figure out why the dynamic version doesn't work.
我有一个基本的显示/隐藏 javascript 可以工作，只要我不让它动态并确保参数。如果有人能帮我弄清楚为什么动态版本不起作用，我将不胜感激。
Working code:
javascript
工作代码：
javascript
function togglesDiv(){
var catdiv = document.getElementById("addNewCat");
if(catdiv.style.display == ""){
catdiv.style.display = "none";
} else {
catdiv.style.display = "";
}
}
html
html
<span onclick="togglesDiv();">Add new category</span>
<div id="addNewCat" style="display: none;">
lalala
</div>
Non working code:
javascript
非工作代码：
javascript
function togglesDiv(divsId){
var catdiv = document.getElementById("divsId");
if(catdiv.style.display == ""){
catdiv.style.display = "none";
} else {
catdiv.style.display = "";
}
}
html
html
<span onclick="togglesDiv(addNewCat);">Add new category</span>
<div id="addNewCat" style="display: none;">
lalala
</div>
回答by Andy E
You have a variable name wrapped in string delimiters, making it a string literal instead of a variable. Change
您有一个用字符串分隔符包裹的变量名称，使其成为字符串文字而不是变量。改变
var catdiv = document.getElementById("divsId");
To
到
var catdiv = document.getElementById(divsId);
On the flipside, the call to the function needs the quotes in it's argument (because it should be a string), you can use single quotes to avoid confliction:
另一方面，对函数的调用需要参数中的引号（因为它应该是字符串），您可以使用单引号来避免冲突：
<span onclick="togglesDiv('addNewCat');">Add new category</span>
回答by James Wiseman
Remove the quotes:
删除引号：
var catdiv = document.getElementById("divsId");
Becomes
成为
var catdiv = document.getElementById(divsId);
You don't have an element with an ID of "divsId".
您没有 ID 为“divsId”的元素。
On a completely unrelated note, you can't be sure that catdiv.style.displaywill always be equal to ""when it is visibile. There are other styles which cause it to be displayed ('inline', 'block', for example).
在一个完全不相关的注释上，你不能确定当它可见时catdiv.style.display总是等于""。还有其他样式会导致它被显示（例如，'inline'、'block'）。
A better solution might be:
更好的解决方案可能是：
function togglesDiv(divsId){
var catdiv = document.getElementById("divsId");
if(catdiv.style.display === "none"){
catdiv.style.display = "";
} else {
catdiv.style.display = "none";
}
}
(And yes, I did mean to put the triple equals ===in)
（是的，我确实是想把三个等号放进去===）
回答by JKirchartz
Your code is looking for a div with an ID "divsId" change your code to:
您的代码正在寻找 ID 为“divsId”的 div 将您的代码更改为：
function togglesDiv(divsId){
var catdiv = document.getElementById(divsId);
if(catdiv.style.display == ""){
catdiv.style.display = "none";
} else {
catdiv.style.display = "";
}
}
回答by Woody
Because you are looking for a div called "divsId" rather than the value in the variable divsId. Remove the speach marks!
因为您正在寻找一个名为“divsId”的 div，而不是变量 divsId 中的值。去除口号！
回答by giker
Remove quotes from
var catdiv = document.getElementById("divsId");should be
var catdiv = document.getElementById(divsId);
删除引号
var catdiv = document.getElementById("divsId");应该是
var catdiv = document.getElementById(divsId);
And add quotes:
并添加引号：
<span onclick="togglesDiv(addNewCat);">Add new category</span>
Should be
应该
<span onclick="togglesDiv('addNewCat');">Add new category</span>
回答by BGerrissen
Improved function
改进的功能
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;
}
And as mentioned, quotes are needed when writing yucky inline javascript.
如前所述，在编写令人讨厌的内联 javascript 时需要引号。
<span onclick="toggleDisplay('addNewCat')"> ... etc
Tbh. pick a js toolkit/library and use it over reinventing the wheel yourself and stop writing inline javascript, your life and happiness will improve substantially if you do =P
天。选择一个 js 工具包/库并使用它而不是自己重新发明轮子并停止编写内联 javascript，如果你这样做，你的生活和幸福会大大改善 =P
