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

演示