时间戳

首页 > 解决方案 > 使用 Jquery 随机插入带有超链接的图像

jquery - 使用 Jquery 随机插入带有超链接的图像

问题描述

这可能有点牵强，但我有一个底部有 3 个小图像占位符的网页。

我希望每个占位符能够在每次加载页面时显示带有链接的随机图像。

例如，目前我有：

<div class="col-xs-12 col-sm-12 col-md-4 homeFooter1">
<a href="Link-1"><img src="/image-1.jpg" alt="Image 1"></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 homeFooter2">
<a href="Link-2"><img src="/image-2.jpg" alt="Image 2"></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 homeFooter3">
<a href="Link-3"><img src="/image-3.jpg" alt="Image 3"></a>
</div>

我想让“homeFooter1”在 3 个不同的图像之间进行选择——每个图像都有自己指向不同页面的链接，“homeFooter2”和“homeFooter3”也是如此。

图像和链接不一定符合特定模式。例如，我可能想在以下选项中进行选择：Pet-Food、Dog-Biscuits、Fish-Food 在第一个占位符中，它们的链接是宠物食品、狗零食和水上运动。

希望这是有道理的！我已经看到了从数组中选择图像的示例，但没有看到具有相应链接的图像。

最简单的方法可能是将所有 div 放在页面上，并使用数组来隐藏/取消隐藏，但我知道用户的带宽。

提前致谢！

标签： jqueryarraysrandomhyperlinkelement

解决方案

您应该使用两个数组或字典，然后使用随机生成器。使用 Jquery 将图像和链接附加到如下页面。这样您就不必输入每个 div 并且效率更高。

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>


<div class="col-xs-12 col-sm-12 col-md-4 homeFooter1" id="placeholder"></div>

<script>

var images = ["/image-1.jpg", "/image-2.jpg", "/image-3.jpg"];
var links = ["http://google.com","http://msn.com","http://stackoverflow.com"];

//below is the random number generator the 3 is the upper limit int and 1 is the lower limit exclusive

var currImage = Math.floor((Math.random() * 3) + 1);
//array for images


$(document).ready(function(){
  $("#placeholder").append("<a href='" + links[currImage] + "'><img src='" + images[currImage] +"' alt='Image 1'></a>");
  });


</script>

推荐阅读