4

我知道，它不受 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可以看到代码。

为了回应下面的答案，我试过这个：

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";
    }
}

但它仍然无法正常工作。

4

4 回答 4

16

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

var elements = document.getElementsByClassName('editp');
for(var i=0; i<elements.length; i++) { 
  elements[i].style.display='none';
}
  • elements 是按它们在树中出现的顺序找到的元素的实时 NodeList。
  • names 是一个字符串，表示要匹配的类名列表；类名由空格分隔
  • getElementsByClassName 可以在任何元素上调用，而不仅仅是在文档上。调用它的元素将用作搜索的根。

应该通过这个。

于 2012-11-06T10:40:31.693 回答
2

getElementsByClassName返回 a NodeList（或者如果它不是内置的，则返回一个数组），但是您HTMLElement通过直接引用其上的style属性来使用它，就好像它是 a 一样：

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

您应该在 JavaScript 控制台中看到一个错误，因为您正在尝试display从undefined(since getElementsByClassName("editp").stylewill be undefined) 检索该属性。

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

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 toggle = "off"从代码中删除（在全局范围内，就在函数上方）并toggle为editToggle. 但是你没有editToggle根据引用的标记传递任何东西，即使你是，toggle如果它是一个函数参数，在函数中设置一个新值也不会产生任何持久的影响，因为在函数返回后没有任何东西引用它.

于 2012-11-06T10:40:18.353 回答
1

您创建的标记中可能有未终止的字符串文字。似乎还存在其他帖子中提到的其他问题。

改变：

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

至

"<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:green;\">on</span></a>";
于 2012-11-06T10:40:46.283 回答
-1

您似乎在var toggle="off".

确保editToggle()在代码中的某处调用。

我建议您使用浏览器或扩展程序中内置的检查器。例如 Firefox 或 Chrome Inspector 的 Firebug 扩展。使用控制台调试并查看您的 javascript 中是否存在错误。

于 2012-11-06T10:56:50.067 回答