Question

我有一个基本的显示/隐藏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>

Answer 1

您有一个变量名称包装在字符串分隔符中，使其成为字符串文字而不是变量。变化

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

要

var catdiv = document.getElementById(divsId);

另一方面，对函数的调用需要它的参数中的引号（因为它应该是一个字符串），你可以使用单引号来避免冲突：

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

Answer 2

删除引号：

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

变为

var catdiv = document.getElementById(divsId);

您没有ID为“divsId”的元素。

在完全不相关的说明中，您无法确定catdiv.style.display在可见时是否始终等于""。还有其他样式可以显示它（例如'inline'，'block'）。

更好的解决方案可能是：

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

（是的，我的意思是将三等于===置于其中）

Answer 3

您的代码正在寻找ID为“divsId”的div，将您的代码更改为：

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

Answer 4

因为您正在寻找名为“divsId”的div而不是变量divsId中的值。删除语音标记！

Answer 5

删除引号 var catdiv = document.getElementById("divsId"); 应该 var catdiv = document.getElementById(divsId);

并添加引号：

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

应该是

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

Answer 6

改进功能

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

动态显示/隐藏div与JavaScript无法正常工作

6 个答案: