JavaScript "getElementsByClassName"不工作

Question

我有一个带有 TreeMap 片的网站，然后我使用 Ajax 删除该树并使用 javascript 插入数字。我用的是；

document.getElementById("cut_oak_tree");

我现在在页面上添加了另一棵树，它的功能应该与第一棵树完全相同，只是只有您单击的树才会被删除。为了避免重复代码，我尝试添加以下内容:

document.getElementsByClassName("cut_oak_tree");

然后将我的 div 从使用 id 更改为 class。然而，当我现在点击任何一棵树时，什么也没有发生。我当前的 ajax 代码如下所示:

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();
        }

我进行了大量搜索，发现我可能需要将 for 循环与 document.getElementsByClassName("cut_oak_tree"); 一起使用但我真的无法让它发挥作用。如果我正确地理解了我的问题，那么如果我能够确定 div 中的哪些 TreeMap 像在按下时应被删除，那么一切都应该很好。提前致谢。

编辑:HTML 示例:

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

Answer 1

尝试以下操作:

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 并稍作修改，您可以执行以下操作:

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>

因此将您的 JS 函数更改为:

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

<小时/>

对评论的回复:

为了唯一标识点击的<img>具有相同图像的图像只需对两个 img src 中的一个进行细微更改。示例在 src src="http://www.pbpixels.com/x/images/oak.png "内留出空间。注意后面的空格.png 这将使两者之间产生差异