改變一個簡單的SRC與阿賈克斯

Question

我有這樣一段代碼：

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","i",true); 
    xmlhttp.send(); 
    } 

這個函數的作用是什麼，就是當你按下的圖像，圖像中消失。我希望它更改爲另一個圖像，並且我嘗試過這樣的事情：

getEle.innerHTML = getEle.innerHTML.replace(h,xmlhttp.src="hello.png"); 

沒有運氣。該頁面包含幾個相同類型的圖像。如果你喜歡看HTML代碼，看看：

<div class="cut_oak_tree"> 
      <img src="http://www.pbpixels.com/x/images/oak.png" onclick="loadXMLDoc(this.outerHTML), myFunction(this)" /> <!--DO NOT CHANGE SRC --> 
      <br> 
      <img src="http://www.pbpixels.com/x/images/oak.png " onclick="loadXMLDoc(this.outerHTML), myFunction(this)" /> <!--DO NOT CHANGE SRC --> 
      <img src="http://www.pbpixels.com/x/images/oak.png " onclick="loadXMLDoc(this.outerHTML), myFunction(this)" /> <!--DO NOT CHANGE SRC --> 
     </div> 

在此先感謝。

Answer 1

替換此：

getEle.innerHTML = getEle.innerHTML.replace(h,xmlhttp.responseText); 

與此：

var imgElems = getEle.getElementsByTagName('img'); 
for (var i = 0; i < imgElems.length; i++) { 
    imgElems[i].src = xmlhttp.responseText; 
} 

您可能要定義圖像的路徑，所以你可以使用imgElems[i].src = imagePath + xmlhttp.responseText;。

UPDATE

所以，改變的img標籤這個（loadXMLDoc參數改變）：

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

然後，而不是4線部分我給你上面，只使用這樣的：

h.src = xmlhttp.responseText; // h now refers to the clicked image 

Answer 2

你新的新形象不會自動加載，即使路徑是正確的

您可以強制瀏覽器通過傳遞一個額外的變量，像這樣重新載入圖像：

d = new Date(); 
getEle.src = "xmlhttp.responseText?"+d.getTime();