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

我一直在搜索，发现我可能需要与document.getElementsByClassName("cut_oak_tree");一起使用for循环但我真的无法让它发挥作用。如果我已经正确地解决了我的问题，那么一切都应该是好的，如果我可以确定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 loop

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 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：我在编辑历史记录中找到了原始代码。。。我的代码现在应该是正确的。

Javascript“getElementsByClassName”无法正常工作

2 个答案:

Demo Fiddle