Javascript" getElementsByClassName"不工作 [英] Javascript "getElementsByClassName" not working
问题描述
我有一张带有一张树的图片的网站，然后我使用Ajax删除那棵树并使用javascript插入一个数字。我用的是这样的;
document.getElementById（cut_oak_tree）;
现在我在页面上添加了另一棵树，它应该具有与第一棵树完全相同的功能，除了只有你点击的那棵树被移除。为避免重复代码，我尝试添加以下内容：
document.getElementsByClassName（cut_oak_tree）;
然后改变我的div使用 id 到 class 。但是，现在当我点击任何树时没有任何反应。我现在的ajax代码如下所示：
function loadXMLDoc（）
{
var xmlhttp ;
if（window.XMLHttpRequest）
{//代码为IE7 +，Firefox，Chrome，Opera，Safari
xmlhttp = new XMLHttpRequest（）;
}
else
{//代码为IE6，IE5
xmlhttp = new ActiveXObject（Microsoft.XMLHTTP）;
}
xmlhttp.onreadystatechange = function（）
{
if（xmlhttp.readyState == 4&& xmlhttp.status == 200）
{
var getClass = document.getElementsByClassName（cut_oak_tree）。innerHTML = xmlhttp.responseText; //请求这个。
for（i = 0; i< getClass.length; i ++）
{
getClass [i] .innerHTML =;
}
}
}
xmlhttp.open（POST，xxx，true）;
xmlhttp.send（）;
}
我一直在寻找很多，发现我可能需要使用for与 document.getElementsByClassName（cut_oak_tree）;
一起循环，但我无法真正理解它的工作原理。如果我已经正确地计算了我的问题，那么如果我可以确定在按下div时哪些树图像应该被删除，那么一切都应该很好。提前致谢。
编辑：
Html示例：
< div idthanks>
< img class =cut_oak_treesrc =http://www.pbpixels.com/x/images/oak.pngonclick =loadXMLDoc（），myFunction（）>
< img class =cut_oak_treesrc =http://www.pbpixels.com/x/images/oak.pngonclick =loadXMLDoc（），myFunction（）>
< / div>
请尝试以下操作：
document.getElementsByClassName（cut_oak_tree）[0];
如果要将更改应用于多个元素，且类名 cut_oak_tree 那么你必须使用 for循环
var getClass = document。 getElementsByClassName方法（ cut_oak_tree）;
for（i = 0; i< getClass.length; i ++）
{
getClass [i] .innerHTML =;
您可以做一些细微的修改：
HTML
< div class =cut_oak_tree>
< img src =http://www.pbpixels.com/x/images/oak.pngonclick =loadXMLDoc（this.outerHTML），myFunction（）/>
< img src =http://www.pbpixels.com/x/images/oak.pngonclick =loadXMLDoc（this.outerHTML），myFunction（）/>
< / div>
因此，将您的 JS 函数更改为：
函数loadXMLDoc（h）
{
var xmlhttp;
if（window.XMLHttpRequest）
{//代码为IE7 +，Firefox，Chrome，Opera，Safari
xmlhttp = new XMLHttpRequest（）;
}
else
{//代码为IE6，IE5
xmlhttp = new ActiveXObject（Microsoft.XMLHTTP）;
}
xmlhttp.onreadystatechange = function（）
{
if（xmlhttp.readyState == 4&& xmlhttp.status == 200）
{
var getEle = document.getElementsByClassName（'cut_oak_tree'）[0];
getEle.innerHTML = getEle.innerHTML.replace（h，xmlhttp.responseText）;
}
}
xmlhttp.open（POST，http://www.pbpixels.com/x/post.php，true）;
xmlhttp.send（）;
}
Demo小提琴
回应评论：
为了唯一标识用相同的图像点击< img> s，只需对两个img srcs中的一个进行细微更改。 src中的空间src =http://www.pbpixels.com/x/images/oak.png。注意.png后面的空格，这将使两者之间的差异
I have a website with a picture of a tree, I have then used Ajax to remove that tree and insert a number using javascript. What I used for that was;
document.getElementById("cut_oak_tree");
I have now added another tree on the page, which should have the exact same function as the first tree, except that only the tree that you clicked on, shall be removed. To avoid duplicating code, I have tried adding following:
document.getElementsByClassName("cut_oak_tree");
and then changed my div from using id to class. However, nothing happens when I click any of the trees now. My current ajax code right now, looks like this:
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var getClass = document.getElementsByClassName("cut_oak_tree").innerHTML=xmlhttp.responseText;//ask for this.
for(i=0;i<getClass.length;i++)
{
getClass[i].innerHTML = "";
}
}
}
xmlhttp.open("POST","xxx",true);
xmlhttp.send();
}
I have been searching a lot and found that I might need to use a for loop together with the document.getElementsByClassName("cut_oak_tree");
but I can't really get that to work. If I have figured my problem correctly, everything should be good if I could just determine which of the tree images in the div should be removed when it's pressed. Thanks in advance.
EDIT: Html sample:
<div id "thanks">
<img class="cut_oak_tree" src="http://www.pbpixels.com/x/images/oak.png" onclick="loadXMLDoc(), myFunction()">
<img class="cut_oak_tree" src="http://www.pbpixels.com/x/images/oak.png" onclick="loadXMLDoc(), myFunction()">
</div>
Try the following:
document.getElementsByClassName("cut_oak_tree")[0];
If you want to apply changes to more than one elements with classname cut_oak_tree then you will have to use for loop
var getClass = document.getElementsByClassName("cut_oak_tree");
for(i=0;i<getClass.length;i++)
{
getClass[i].innerHTML = "";
}
Using your earlier HTML with slight modifications you can do the following:
HTML
<div class="cut_oak_tree">
<img src="http://www.pbpixels.com/x/images/oak.png" onclick="loadXMLDoc(this.outerHTML), myFunction()" />
<img src="http://www.pbpixels.com/x/images/oak.png" onclick="loadXMLDoc(this.outerHTML), myFunction()" />
</div>
Hence change your JS function to :
function loadXMLDoc(h)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var getEle = document.getElementsByClassName('cut_oak_tree')[0];
getEle.innerHTML = getEle.innerHTML.replace(h,xmlhttp.responseText);
}
}
xmlhttp.open("POST","http://www.pbpixels.com/x/post.php",true);
xmlhttp.send();
}
Demo Fiddle
Response to comment:
Inorder to uniquely identify clicked <img>s with same images just make minor change to the one of the img srcs from the two.Example give space within src src="http://www.pbpixels.com/x/images/oak.png ".Note the space after .png which will make the difference between the two
这篇关于Javascript" getElementsByClassName"不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
