Question

我正在尝试随机替换网格中的图像。每次触发该功能时，新图像会短暂闪烁（在Chrome中），但旧图像会重新出现。我知道有一个非常简单的解释为什么我遇到这个问题，但当然，我无法弄明白。任何帮助都将不胜感激。

相关网站为http://www.apocwords.net/systems/randomdungeon.html。如果单击Randomize Me！字样，则顶部，左侧，右侧和底部的块应切换到随机选择的新图像。

function createMe() { 
document.getElementById("left2").src = xLefts[Math.floor(Math.random()* xLefts.length)];
document.getElementById("left3").src = xLefts[Math.floor(Math.random()* xLefts.length)];
document.getElementById("left4").src = xLefts[Math.floor(Math.random()* xLefts.length)];
}

The HTML:
<img src="/images/templates/template_left_05.jpg" width="100" height="200" id="left2" class="template"/>
<img src="/images/templates/template_left_01.jpg" width="100" height="200" id="left3" class="template"/>
<img src="/images/templates/template_left_02.jpg" width="100" height="200" id="left4" class="template"/>

我确信有一百万种方法可以做我想做得更好，更快，更有效的事情。但是，我现在不关心这一点。我只想知道为什么我要做的事情不起作用。提前谢谢！

Answer 1

您的问题是您的链接中有“href”属性。单击它时，您对同一页面发出新请求。你可以：

删除它并使用链接上的this css property来制作“手”指针。
使用this jQuery method

Answer 2

将随机链接更改为...

<a href="javascript:createMe(); return false;">Randomize Me!</a>

永久设置新的图像源

2 个答案: