javascript document.getElementById(id).src = ???自 php 创建 html 以来不起作用答案

【问题标题】：javascript document.getElementById(id).src = ??? does not work since php creation of htmljavascript document.getElementById(id).src = ???自 php 创建 html 以来不起作用
【发布时间】：2014-01-31 15:36:43
【问题描述】：

我最近将我的网站从静态（仅 html + css）更改为使用 php 生成 html，例如让我有一个画廊显示特定文件夹中的所有图像等。

我的 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 gfile 来生成的，如果它们传递了这些参数，它们将被放入一个数组中，并且为该数组中的每个项目添加一个带有参数的列表项。我也有一个计数器，可以看到“image1，image2”等。

我尝试在之前（显示我的第一张图片 (images/gallery/showOff1.jpg)）和之后打印 document.getElementById("bigImageForShow").src。

之后的输出实际上是我在我的网站上点击的图片。但是 src 在视觉方面没有改变，如果我检查“大图像”元素，我仍然有起始图像的 src，即使 document.getElementById("bigImageForShow").src 另有说明。

【问题讨论】：

如果侦听器使用makeBigSimple(this) 传递对它所在元素的引用，则函数将缩减为function makeBigSimple(el){document.getElementById("imageForShow").src = el.src}。
确实如此，前几天在类似的系统上确实做到了，谢谢提示
找到了答案，在 php 脚本的第一行中，像这样

标签： javascript php html dynamic web

【解决方案1】：

您是否有机会在 IE 中测试您的页面？它可能适用于 chrome，当您通过 javascript 更新它时，IE 有一种讨厌的倾向，即不显示新图像。解决这个问题的方法是通过在图像调用中添加一个不断变化（时间）的 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());

【讨论】：

老实说，我只在 chrome 中测试过。而且我对Jquary一无所知，我是一般的后端程序员，只是在处理一些前端的东西。我也做了很多 console.logs 来测试值。

【解决方案2】：

找到了答案，在这样的 php 脚本内的第一行

<?php
self::makeSite();

这是创建站点的主要方法的名称，在我删除该行后一切正常，使其无法运行。不知道为什么会这样。

【讨论】：