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

【问题标题】：Randomly display two of five images with JavaScript (jQuery)使用 JavaScript (jQuery) 随机显示五个图像中的两个
【发布时间】：2012-08-06 14:51:08
【问题描述】：

我有一个如下所示的 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 解决方案，那就太好了。

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

【问题讨论】：

标签： javascript jquery random

【解决方案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

【讨论】：

嘿，大卫，我想知道我是否想显示 10 张图片中的 5 张，而不是我应该怎么做？我已尝试编辑您的代码，但无法正常工作
更多信息：我想显示 10 个中的 5 个图像。并且不显示重复图像。最重要的是每次我按下按钮它必须显示 5 图像。但是在我通过放置 index3、index4、index5 来编辑您的代码之后……按下按钮 2-3 次后，它只显示 4 张图像。有时3张图片。怎么了？以及如何解决这个问题？
@PoramatFin：是的，这个解决方案不能很好地扩展。为了能够按原样扩展它，您需要链接越来越多的.nots，并且您需要随着您的使用而减小随机化范围（增加-1 术语）这样做，您必须反驳这样一个事实，即该操作有时会为您提供低于 0 的索引（这些将是“未命中”，最终结果中的元素少于 5 个）。
对于您的场景，值得进行适当的随机播放for instance, as described here，然后只获取结果的第一部分。 Demo
你太棒了，Devid Hedlund :) 再想一想。我正在尝试使用 document.ready 方法调用该函数。但它为什么不起作用？ $(document).ready(function(randomize){ randomize(); });

【解决方案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

【讨论】：

在使用 eq 时，您希望使用基于 0 的索引，因此请跳过变量中的 +1。

【解决方案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++;
}
}

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

【讨论】：

属性值需要引用，因为是点'a[href="p' + number + '.html"]'。