javascript document.getElementById（id）.src = ???不工作，因爲PHP的創建html

Question

我最近從靜態（只有html + css）更改我的網站使用PHP來生成HTML允許我examply有一個畫廊顯示特定文件夾中的所有圖像等。

我的JavaScript

function makeBigSimple(id){ 

var src = document.getElementById(id).src; 

document.getElementById("imageForShow").src = src; 

} 

我的PHP只是回聲出HTML。你會感興趣的部分是這個html。

<div class="bigImage" id="bigImage" style="background-color: rgba(26,18,255,0.4)"> 
    <img id="imageForShow" src="images/gallery/showOff1.jpg" alt="Big Image" onLoad="resize('imageForShow','bigImage')"> 
</div> 
<div class="smallImages"> 
    <ul> 
     <li><img id="image0" src="images/gallery/showOff1.jpg" onClick="makeBigSimple('image0')" alt="Click to Enlarge" onLoad="resize('image0')"/></li> 
     <li><img id="image1" src="images/gallery/showOff2.jpg" onClick="makeBigSimple('image1')" alt="Click to Enlarge" onLoad="resize('image1')"/></li> 
     <li><img id="image2" src="images/gallery/showOff3.jpg" onClick="makeBigSimple('image2')" alt="Click to Enlarge" onLoad="resize('image2')"/></li> 
     <li><img id="image3" src="images/gallery/showOff4.jpg" onClick="makeBigSimple('image3')" alt="Click to Enlarge" onLoad="resize('image3')"/></li> 
     <li><img id="image4" src="images/gallery/showOff5.jpg" onClick="makeBigSimple('image4')" alt="Click to Enlarge" onLoad="resize('image4')"/></li> 
    </ul> 
</div> 

這些圖像由用於.PNG和.jpg gfiles搜索文件夾genereated，如果他們通過這些參數它們被置於陣列和該陣列中加入與所述參數的列表項中的每一項。我也有一個與「image1，image2」等可見的計數器。

我試圖做一個print.getElementById（「bigImageForShow」）。src之前（顯示我的第一個圖像（圖像/畫廊/showOff1.jpg））和之後。

之後的輸出實際上是我在我的網站上點擊過的圖片。但是src在視覺方面並沒有改變，如果我檢查「大圖片」元素，我仍然有開始圖片的src，甚至是document.getElementById（「bigImageForShow」）。

Answer 1

找到了答案，第1行的PHP腳本中像這樣

<?php 
self::makeSite(); 

這對科瑞的主要方法的名稱該網站，使其無法正常工作後，我刪除該行一切工作。不知道爲什麼這是壽。

Answer 2

你有沒有機會在IE中測試你的頁面？它可能工作在鉻，IE瀏覽器有一個惡劣的傾向，當你通過JavaScript更新它不顯示新的形象。解決這個問題的方法是通過添加URL參數去的圖像調用的東西，是不斷變化的（時間）來欺騙IE成不緩存圖像：

function makeBigSimple(id){ 

    var src = document.getElementById(id).src; 

    // may not be bad idea to console log or alert this value to test it is correct 
    // remove when done debugging 
    alert(src); 

    document.getElementById("imageForShow").src = src + '?forceIeLoad=' + new Date().getTime()); 

} 

，如果你還擁有jQuery的加載，你可以嘗試設置在src這種方式，可能會有更好的效果：

var src = $('#' + id).attr('src'); 
$('#imageForShow').attr('src', src + '?forceIeLoad=' + new Date().getTime());