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

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

应该通过this。

Answer 2

getElementsByClassName会返回一个NodeList（如果它不是内置的，则返回一个数组），但您通过直接引用{{HTMLElement来使用它它上面的属性：

style

您应该在JavaScript控制台中看到错误，因为您尝试从getElementsByClassName("editp").style.display ="none"; // here ------------------------^检索属性display（因为undefined将是getElementsByClassName("editp").style）。

如果您想对第一个匹配元素采取行动：

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设置为函数中的新值也不会产生任何持久影响。，因函数返回后没有引用它。

Answer 3

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

变化：

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

Answer 4

var toggle="off"后，您似乎缺少一个半分号。

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

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

按类名脚本获取元素不起作用

4 个答案: