Javascript“getElementsByClassName”不起作用

Question

我有一个带有树图片的网站，然后我使用 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 时应该删除 div 中的哪些树图像，那么一切都应该很好。提前致谢。

编辑： 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>s，只需对两者中的一个 img srcs 进行微小的更改。示例在 src src="http://www.pbpixels.com/x/ 中给出空间images/oak.png "。注意 .png 后面的空格，这将导致两者之间的差异

Answer 2

我认为最直接的方法是将点击的元素作为参数传递给loadXMLDoc()，然后获取该元素的父元素。像这样的：

HTML

<div id="cut_oak_tree">
    <img src="http://www.pbpixels.com/x/images/oak.png" onclick="loadXMLDoc(this), myFunction()">
    <img src="http://www.pbpixels.com/x/images/oak.png" onclick="loadXMLDoc(this), myFunction()">
</div>

JS

function loadXMLDoc(clickedElement) {
    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) {
            clickedElement.parentNode.innerHTML = xmlhttpinnerHTML = xmlhttp.responseText; //ask for this.
        }
    }

    xmlhttp.open("POST","xxx",true); //the xxx's represent my website
    xmlhttp.send();
}

注意： 我不能 100% 确定我的逻辑是正确的，因为您更改了原始帖子，而我正在输入我的答案。 :)

更新#2：我在编辑历史中找到了原始代码。 . .我的代码现在应该是正确的。