javascript 通过类名脚本获取元素不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13249168/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get Element By Classname Script Not Working
提问by I wrestled a bear once.
I know, it's not supported by IE, but I found a cool script online that someone was generous enough to provide for free, but I can't figure out why it's not working. I've been staring at this for hours, please point me in the right direction!
我知道，它不受 IE 支持，但我在网上找到了一个很酷的脚本，有人慷慨地免费提供，但我不知道为什么它不起作用。我一直盯着这个几个小时，请指出我正确的方向！
My code:
我的代码：
<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";
}
}
also:
还：
echo "<span id=\"editToggle\"><a href=\"#\" onclick=\"editToggle(); return false;\">Edit Mode: <span style=\"color:red;\">OFF</span></a></span>";
The code from getbyclass.jscan be seen here.
getbyclass.js可以在此处查看代码。
In response to the answers below, I've tried this:
为了回应下面的答案，我试过这个：
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";
}
}
But it's still not working.
但它仍然无法正常工作。
回答by Talha
getElementsByClassNamereturns a collection. You might need to loop through the results, like this:
getElementsByClassName返回一个集合。您可能需要遍历结果，如下所示：
var elements = document.getElementsByClassName('editp');
for(var i=0; i<elements.length; i++) {
elements[i].style.display='none';
}
- elements is a live NodeList of found elements in the order they appear in the tree.
- names is a string representing the list of class names to match; class names are separated by whitespace
- getElementsByClassName can be called on any element, not only on the document. The element on which it is called will be used as the root of the search.
- 元素是找到的元素的活动 NodeList，按照它们在树中出现的顺序。
- names 是一个字符串，表示要匹配的类名列表；类名用空格分隔
- getElementsByClassName 可以在任何元素上调用，而不仅仅是在文档上。调用它的元素将用作搜索的根。
Should go through this.
应该经过这个。
回答by T.J. Crowder
getElementsByClassNamereturns a NodeList(or an array if it's not built-in), but you're using it as though it were an HTMLElementby referring directly to a styleproperty on it:
getElementsByClassName返回一个NodeList（或一个数组，如果它不是内置的），但是你HTMLElement通过直接引用style它的属性来使用它，好像它是一个：
getElementsByClassName("editp").style.display ="none";
// here ------------------------^
You should be seeing an error in the JavaScript console, since you're trying to retrieve the property displayfrom undefined(since getElementsByClassName("editp").stylewill be undefined).
您应该会在 JavaScript 控制台中看到错误，因为您正在尝试display从undefined（因为getElementsByClassName("editp").style将是undefined）检索属性。
If you want to act on the firstmatching element:
如果要对第一个匹配元素进行操作：
var elm = getElementsByClassName("editp")[0];
if (elm) {
elm.style.display ="none";
}
...or if you want to act on all of them:
...或者如果您想对所有这些都采取行动：
var index;
var list = getElementsByClassName("editp");
for (index = 0; index < list.length; ++index) {
list[index].style.display ="none";
}
Update:
更新：
At some point, you edited the question and removed var toggle = "off"from the code (at global scope, just above the function) and made togglean argument to editToggle. But you're not passing anything into editToggleaccording to your quoted markup, and even if you were, setting toggleto a new value within the function won't have any lasting effect if it's a function argument, as nothing refers to it after the function returns.
在某些时候，您编辑了问题并var toggle = "off"从代码中删除（在全局范围内，就在函数上方）并toggle为editToggle. 但是你没有editToggle根据你的引用标记传递任何东西，即使你是，toggle如果它是一个函数参数，在函数中设置一个新值也不会产生任何持久的影响，因为在函数返回后没有任何东西引用它.
回答by Kevin Bowersox
There may be unterminated string literals in the markup you create. It also appears there may be other issues as mentioned in other posts.
您创建的标记中可能有未终止的字符串文字。似乎还有其他帖子中提到的其他问题。
Change:
改变：
"<a href=\"#\">Edit Mode: <span style=\"color:red;>OFF</span></a>";
to
到
"<a href=\"#\">Edit Mode: <span style=\"color:red;\">OFF</span></a>";
This situation is also present in the other markup you create.
这种情况也存在于您创建的其他标记中。
Change:
改变：
"<a href=\"#\">Edit Mode: <span style=\"color:green;>on</span></a>";
to
到
"<a href=\"#\">Edit Mode: <span style=\"color:green;\">on</span></a>";
回答by Ertug
You seem to have a missing semicolumn after var toggle="off".
之后您似乎缺少一个半列var toggle="off"。
Make sure that you call editToggle()somewhere in your code.
确保editToggle()在代码中的某处调用。
I advise you to use inspectors built into browsers or extensions. For example Firebug extension for Firefox or Chrome Inspector. Use the console to debug and see if there are errors in your javascript.
我建议您使用浏览器或扩展程序中内置的检查器。例如 Firefox 或 Chrome Inspector 的 Firebug 扩展。使用控制台进行调试，看看你的javascript 是否有错误。
