javascript - 使用 JavaScript (jQuery) 随机显示五个图像中的两个

Question

我有一个看起来像这样的 HTML 块：

<div id="banners">
    <a href="p1.html"><img src="img1.jpg" /></a>
    <a href="p2.html"><img src="img2.jpg" /></a>
    <a href="p3.html"><img src="img3.jpg" /></a>
    <a href="p4.html"><img src="img4.jpg" /></a>
    <a href="p5.html"><img src="img5.jpg" /></a>
</div>

使用 JavaScript，我想随机选择其中两个图像及其相应的链接并显示它们，同时隐藏其他图像。此外，它们不需要重复，这意味着，我想避免同时显示类似 img1.jpg img1.jpg 的内容。

该站点上正在使用 jQuery，因此如果提议的解决方案是 jQuery 解决方案，那就太好了。

不幸的是，我无法访问该站点的后端，否则我将探索服务器端解决方案。在这种情况下这是不可能的。

Answer 1

var allBanners = $('#banners a');
allBanners.hide();

var index = Math.floor(Math.random() * allBanners.length);
allBanners.eq(index).show();

var index2 = Math.floor(Math.random() * allBanners.length - 1);
allBanners.not(allBanners.eq(index)).eq(index2).show();

演示

Answer 2

var elem = $("#banners a");
var img1 = Math.floor(Math.random() * elem.length), 
    img2 = Math.floor(Math.random() * elem.length);

while (img1===img2) {
  img2 = Math.floor(Math.random() * elem.length);
}

elem.hide();
elem.eq(img1).show();
elem.eq(img2).show();

小提琴 ​</p>

Answer 3

$('a').hide();
var count = 0;
while(count < 2) {
var number = 1 + Math.floor(Math.random() * 5); 
if($('a[href="p' + number + '.html"]:visible').length == 0) {
 $('a[href="p' + number + '.html"]').show();
 count++;
}
}

这确保了选择这两个图像时的无偏随机性。