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();

Demo

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();

FIDDLE

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++;
}
}

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

使用JavaScript（jQuery）随机显示五个图像中的两个

3 个答案: