通过Classname脚本获取元素不工作

我知道，IE不支持，但我发现一个很酷的脚本在线，有人很慷慨地提供免费，但我不明白为什么它不工作。我一直盯着这几个小时，请指点我正确的方向！通过Classname脚本获取元素不工作

我的代码：

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

但它仍然没有工作。

来源

2012-11-06 Occam' s Razor

代码打破的地方在哪里？如果你'console.log' /'alert' getElementsByClassName（“editp”）的内容'你看到了什么（在现代浏览器和IE7中）？此外，不是使用toggle =“on”/“off”并检查字符串值，而是使用布尔值，即它们的用途：即'toggle = true'，然后'if（toggle）' –

此外， “不工作”是什么意思？也许创建一个jsfiddle？ – geekchic

它绝对没有。完全一样。 –

getElementsByClassName返回一个集合。您可能需要遍历结果，这样的：

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

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

应该通过this。

来源

2012-11-06 10:40:31 Talha

getElementsByClassName返回NodeList（或者如果它没有内置阵列），但你使用它，就好像它直接指的是style性质上它是一个HTMLElement：

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

你应该在JavaScript控制台中看到一个错误，因为您试图从undefined检索属性display（因为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"; 
}

更新：

在某些口袋int，您编辑了该问题并从代码中删除了var toggle = "off"（在全局范围内，位于该函数之上），并将toggle作为editToggle的参数。但是根据你引用的标记，你没有把任何东西传入editToggle，即使你是这样，在函数内设置toggle为一个新值，如果它是一个函数参数，没有任何持久效果，因为没有任何东西指向它后函数返回。

来源

2012-11-06 10:40:18

我尝试了你所说的，看看编辑^仍然没什么：/ UGH！ –

忘了'var index;' –

不，还是什么都没有。 –

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

变化：

"<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-06 10:40:46

-1

你似乎var toggle="off"后有失踪semicolumn。

确保您在代码中的某个地方拨打editToggle()。

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

来源

2012-11-06 10:56:50 Ertug

通过Classname脚本获取元素不工作

回答

相关问题