2

我有一个看起来像这样的 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 解决方案,那就太好了。

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

4

3 回答 3

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

演示

于 2012-08-09T11:33:12.550 回答
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>

于 2012-08-09T11:36:19.150 回答
1
$('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++;
}
}

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

于 2012-08-09T11:38:36.587 回答