Javascript 按类名获取元素脚本不工作

我知道，IE不支持它，但我在网上找到了一个很酷的脚本，有人慷慨地免费提供，但我不明白为什么它不起作用。我已经盯着这个看了好几个小时了，请给我指出正确的方向

我的代码：

<script language="javascript" type="text/javascript" src="getbyclass.js"></script>
<script type="text/javascript" language="javascript">
function editToggle(toggle){
    if (toggle == "off"){
    getElementsByClassName("editp").style.display ="none";
    document.getElementById('editToggle').innerHTML="<a href=\"#\" onclick=\"editToggle(\"off\"); return false;\">>Edit Mode: <span style=\"color:red;\">OFF</span></a>";
    toggle="on";
    }else{
    getElementsByClassName("editp").style.display ="inline";
    document.getElementById('editToggle').innerHTML="<a href=\"#\" onclick=\"editToggle(\"on\"); return false;\">>Edit Mode: <span style=\"color:green;\">on</span></a>";
    toggle="off";
    }
}

---

但是它仍然不起作用。

getElementsByClassName

返回一个

节点列表（如果它不是内置的，则返回一个数组），但是您通过直接引用它的
style
属性来使用它，就好像它是一个
HTMLElement
：

getElementsByClassName("editp").style.display ="none";
// here ------------------------^

您应该会在JavaScript控制台中看到一个错误，因为您正在尝试从
未定义的
中检索属性
display
（因为
getElementsByClassName（“editp”）。样式
将是
未定义的
）

如果要对第一个匹配元素执行操作：

var elm = getElementsByClassName("editp")[0];
if (elm) {
    elm.style.display ="none";
}

…或者如果您想对所有这些问题采取行动：

var index;
var list = getElementsByClassName("editp");
for (index = 0; index < list.length; ++index) {
    list[index].style.display ="none";
}

var指数；
var list=getElementsByClassName（“editp”）；
对于（索引=0；索引


更新：

在某些时候，您编辑了问题并从代码中删除了
var toggle=“off”
（在全局范围内，函数正上方），并将
toggle
作为
editToggle
的参数。但是您没有根据引用的标记将任何内容传递到
editToggle
，即使是这样，如果是函数参数，将
toggle
设置为函数中的新值也不会产生任何持久的效果，因为函数返回后没有任何内容引用它。
getElementsByClassName
返回一个集合。您可能需要循环查看结果，如下所示：

var elements = document.getElementsByClassName('editp');
for(var i=0; i<elements.length; i++) { 
  elements[i].style.display='none';
}

var elements=document.getElementsByClassName（'editp'）；
对于（var i=0；i而言，您创建的标记中可能存在未终止的字符串文本。此外，还可能存在其他文章中提到的其他问题

更改：

 "<a href=\"#\">Edit Mode: <span style=\"color:red;>OFF</span></a>";

"<a href=\"#\">Edit Mode: <span style=\"color:green;>on</span></a>";

”；

到

”；

这种情况也出现在您创建的其他标记中

更改：

 "<a href=\"#\">Edit Mode: <span style=\"color:red;>OFF</span></a>";

"<a href=\"#\">Edit Mode: <span style=\"color:green;>on</span></a>";

”；

到

”；
在
var toggle=“off”
之后，似乎缺少一个半列

确保在代码中的某个地方调用了
editToggle（）

我建议您使用内置于浏览器或扩展中的检查器。例如Firefox或Chrome检查器的Firebug扩展。使用控制台调试javascript，查看是否存在错误。
代码中断的具体位置？如果您
console.log
/
alert
查看
getElementsByClassName（“editp”）的内容
您看到了什么（在现代浏览器和IE7中）？另外，不要使用toggle=“on”/“off”并检查字符串值，而是使用布尔值，这就是它们的用途：ie
toggle=true
然后
if（toggle）
还有，你说“不工作”是什么意思？也许创建一个JSFIDLE？它完全不起作用。一点也不。@Adelphia：在回答问题时编辑问题中的代码是不合适的。如果你愿意，你可以在问题的末尾添加注释，但是修改代码会使问题对后来的人毫无用处，并使answ变得无效ers看起来有点不合情理。这次我帮你修好了。我完全按照你说的做了，请参见编辑^still nothin'：/UGH！@Adelphia:然后在其他地方，在你没有显示的代码中，出现了一些错误。这是基本调试，即使IE现在有内置调试器。使用它是无可替代的。
"<a href=\"#\">Edit Mode: <span style=\"color:green;>on</span></a>";

"<a href=\"#\">Edit Mode: <span style=\"color:green;\">on</span></a>";