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