可以通过单击链接刷新javascript

Possible to refresh a javascript via link click?

本文关键字：javascript 刷新 链接 单击 可以通过      更新时间：2023-09-26

可能重复：
当前页面的Javascript硬刷新

我有一个随机图像javascript，它在页面加载时加载随机图像。我想在点击名为"随机图像"的链接时加载另一个随机图像。这是页面：http://www.heybrian.com/

按照现在的方式，"随机图像"链接只会刷新整个页面，从而拉入一个新的随机图像。

编辑：

下面是(截断的(javascript代码。请注意，大约有100张随机照片可以加载，但为了简化，我只包含了四张：

images = new Array(99);
images[0] = "<div id='content_white_border' style='border: 1px white solid;'><div id='content_photo'><a href = 'travels/thailand/2004/ko_tao.php'><img src='lib/images/travels/thailand/2004/ko_tao_mango_bay.jpg' alt='' width='956' height='512' border='0' /></a></div></div><h4>Mango Bay (Taa Toh Bay), Ko Tao &mdash; April 9, 2004</h4>";
images[1] = "<div id='content_white_border' style='border: 1px white solid;'><div id='content_photo'><a href = 'travels/france'><img src='lib/images/travels/france/eiffel_close.jpg' alt='' width='956' height='512' border='0' /></a></div></div><h4>La Tour Eiffel, Paris, France &mdash; November 26, 2006</h4>";
images[2] = "<div id='content_white_border' style='border: 1px white solid;'><div id='content_photo'><a href = 'travels/china/2007/hangzhou.php'><img src='lib/images/travels/china/2007/hangzhou_gold_buddha.jpg' alt='' width='956' height='512' border='0' /></a></div></div><h4>Buddha image,  Língyǐn Temple <span lang='zh' xml:lang='zh'>灵隐寺</span>, Hángzhōu, China &mdash; August 2, 2007</h4>";
images[3] = "<div id='content_white_border' style='border: 1px white solid;'><div id='content_photo'><a href = 'travels/sri_lanka'><img src='lib/images/travels/sri_lanka/elephant_baby_wide.jpg' alt='' width='956' height='512' border='0' /></a></div></div><h4>Baby at the elephant breeding center, Kandy, Sri Lanka</h4>";
images[4] = "<div id='content_white_border' style='border: 1px white solid;'><div id='content_photo'><a href='travels/mongolia/'><img src='lib/images/travels/mongolia/man_baby_3_wide.jpg' alt='' width='956' height='512' border='0' /></a></div></div><h4>Mongol and his baby, Mongolia &mdash; July 2006</h4>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);

如果您知道所有可供选择的图像，您可以将它们放在一个数组中，并在按钮完全加载到Javascript中时随机选择一个：

var imgs = ["a.jpg", "b.jpg", "c.jpg"];
function pickImage()
{
    var idx = parseInt(Math.floor(Math.random() * imgs.length), 10);
    document.getElementById("random_image").src = imgs[idx];
}

如果你不想把图像数组放在Javascript中，那么你需要使用AJAX来调用服务器。然后，服务器将确定应该显示哪个图像，并将路径返回给浏览器。

您不应该在"随机图像"链接上使用location.reload((。相反，使用JavaScript添加图像内容：

var link = document.getElementById('id_for_random_image_link');
link.addEventListener("click", function(evt){ 
   // code to insert your image
}, false);

此外，您不应该使用document.write();，当您只想用新图像替换<div id="content_photo">中的图像时，这是低效的。因此，您应该删除JavaScript images数组中<div id='content_white_border'><div id="content_photo">的所有HTML标记，并将上一个函数转换为：

var link = document.getElementById('id_for_random_image_link');
link.addEventListener("click", function(evt){ 
   var index = Math.floor(Math.random() * images.length);
   document.getElementById('content_photo').innerHTML = images[index];
}, false);

使用onclick事件并随机更改SRC属性；

保持干燥：从JS中删除所有重复的泥泞HTML，并将其放在文档主体中，只在数组中保留文件名和任何其他可变数据(如href(。可以使用一组对象：

var imgs = [
{name:"some_img.jpg",
 href:"dir'some.php"},
{name:"another_img.jpg",
 href:"direct'something.php"},
{name:"yet_antoher_img.jpg",
 href:"directory'some.php"}];

然后使用JQuery替换图像SRC以及其他必要的属性和内容。简化结构：

 $("button").onclick(function(){
   index = Math.floor(Math.random() * imgs.length);
   current = imgs[index];
   $("a").attr("href",current.href);
   $("img").attr("src",current.name);
    });
相关文章：