Question

我一直在搜索和搜索没有解决方案。我有这个HTML：

<div class="content_wrap"> 
  <script src="jslib/random_image.js"></script>
</div>

还有一个链接：

<li><a href="javascript:location.reload();" target="_self">Random image</a></li>

但是我没有重新加载整个页面（lame），而是要刷新div（不确定是否可能）或者至少刷新random_image.js。

你怎么能用jQuery做到这一点？或PHP，或其他什么？

Answer 1

假设你有img in div

<div class="content_wrap"> 
  <script src="jslib/random_image.js"></script>
  <img id="random_image" href="">
</div>


function updateNewImage(){
//make ajax to server 
// get new url store it in variable new_href
// update random_image  $("$random_image").attr("href",new_href);
}
<li><a href="javascript:updateNewImage();" target="_self">Random image</a></li>

您可以在onclick上调用一个函数，它将使用ajax获取新的图像URL，然后您可以更新img href位置。

Answer 2

没有测试过代码，但假设没有重大错误，应该这样做。我假设你有jQuery（也可以用简单的js完成，但也可以使用jq）：

<div class="content_wrap" id="content_wrap"> 
  <img id="rndImg1" src="clicktorelodme.png"/>
</div>

<script>
function reloadImage(imgId) {
    String randomImgSrc = "anewimgsrc.png";
    $("#content_wrap").find("#"+imgId).attr("src", randomImgSrc);
}
</script>


<li><a href="#" onclick="reloadImage('rndImg1'); return false;">Random image</a></li>

看看你对另一个答案的回答我明白你想要做的不仅仅是刷新图像，你想加载的代码就像设置图像，设置标题等“东西”。

为此，您需要执行其他操作，例如向页面添加新的脚本元素，它可以执行您想要的任何操作。请查看this answer以了解如何执行此操作。

Answer 3

首先，你需要一种方法来引用你的DIV，例如id：

<div class="content_wrap" id="randomImage">
    <script src="jslib/random_image.js"></script>
</div>

然后重新加载DIV，您只需重写其内容即可。这可能会被浏览器缓存，因此，根据脚本的工作方式，您可能会被迫在调用中添加一个虚拟参数。

您可以重新声明整个DIV清空它并使用append()重新创建，或者您可以使用提供更多控制权的.load()：

$('#randomImage').load('jslib/random_image.js?dummy='+Math.random(),
    function(res, status, xhr){
        if ('success' != status)
        {
            // Do something with the image, maybe load a default one
            return;
        }
});

jQuery或PHP在点击时刷新随机图像脚本

3 个答案: