javascript - 通过类名脚本获取元素不起作用

Question

我知道，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";
    }
}

还有:

echo "<span id=\"editToggle\"><a href=\"#\" onclick=\"editToggle(); return false;\">Edit Mode: <span style=\"color:red;\">OFF</span></a></span>";

可以看到getbyclass.js中的代码here .

---

针对以下答案，我试过这个:

function editToggle(toggle){
    var list = getElementsByClassName("editp");
    if (toggle == "off"){
    //getElementsByClassName("editp").style.display ="none";
        for (index = 0; index < list.length; ++index) {
            list[index].style.display ="none";
        }
    document.getElementById('editToggle').innerHTML="<a href=\"#\" onclick=\"editToggle(\"off\"); return false;\">>Editfalse;\">Edit Mode: <span style=\"color:red;\">OFF</span></a>";
    toggle="on";
    }else{
    //getElementsByClassName("editp").style.display ="inline";
        for (index = 0; index < list.length; ++index) {
            list[index].style.display ="inline";
        }
    document.getElementById('editToggle').innerHTML="<a href=\"#\" onclick=\"editToggle(\"on\"); return false;\">>Editfalse;\">Edit Mode: <span style=\"color:green;\">on</span></a>";
    toggle="off";
    }
}

但是还是不行。

Answer 1

getElementsByClassName 返回一个集合。您可能需要遍历结果，如下所示:

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

• elements 是找到的元素的实时 NodeList，按照它们在树中出现的顺序排列。
• names 是一个字符串，表示要匹配的类名列表；类名以空格分隔
• getElementsByClassName 可以在任何元素上调用，而不仅仅是在文档上。调用它的元素将用作搜索的根。

应该通过this .