如何使用 Javascript 在单击另一个图像时显示多个随机图像？答案

【问题标题】：How to make multiple random images appear upon clicking another using Javascript?如何使用 Javascript 在单击另一个图像时显示多个随机图像？
【发布时间】：2017-04-10 16:52:09
【问题描述】：

我目前正在尝试制作一个在单击时消失并显示三个随机图像的图像。到目前为止，我认为也许将可点击的图像复制两次并让它们不可见会起作用，因此它们会更改为随机图像之一并在单击图像后变得可见。如果您对这可能如何工作有任何其他想法，我真的很想知道！

还有谁知道我是怎么做到的，所以一张图片只能用于三个地点之一，这样你总是有三个不同的随机图片相邻。

这是我的 JS 和 HTML：

var playerImg;
var playerImg2;
var playerImg3;
var playerArray = ["A1.png", "A2.png", "A3.png", "A4.png", "A5.png", "M1.png", "M2.png", "M3.png", "M4.png", "M5.png", "V1.png", "V2.png", "V3.png", "V4.png", "V5.png", "D1.png", "D2.png", "D3.png"];

function openPack() {
    var randomPlayer = (Math.floor(Math.random() * 18) + 1);
    playerImg = playerArray[randomPlayer - 1];
    document.getElementById("pack").src = "image/" + playerImg;

    var randomPlayer2 = (Math.floor(Math.random() * 18) + 1);
    playerImg2 = playerArray[randomPlayer2 - 1];
    document.getElementById("player2").src = "image/" + playerImg2;

    var randomPlayer3 = (Math.floor(Math.random() * 18) + 1);
    playerImg3 = playerArray[randomPlayer3 - 1];
    document.getElementById("player3").src = "image/" + playerImg3;
}

document.querySelectorAll("img#player2")[0].addEventListener("click", openPack);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <img id="pack" src="image/pack.png" alt="Unopened pack">
    <img id="player2" src="image/pack.png" alt="Place for a second player after the pack is opened">
    <img id="player3" src="image/pack.png" alt="Place for a third player after the pack is opened">
    <img id="veld" src="image/veld.png" alt="Football field with positions">



</body>
<script src="scripts/packs.js"></script>

</html>

如果我忘了告诉我什么，请告诉我，谢谢！

【问题讨论】：

标签： javascript arrays image random invisible

【解决方案1】：

这里是新的openPack 函数，它将排除重复项

function openPack() {
    var playerArraycopy = playerArray.slice();//getting new copy of initial input
    function getRandomImg(){
        return playerArraycopy.splice([Math.floor(Math.random() * playerArraycopy.length)],1)[0];//calculating a new random image and removing it from copy to exclude duplicates
    }

   document.getElementById("player2").src = "image/" + getRandomImg();
   document.getElementById("pack").src = "image/" + getRandomImg();
   document.getElementById("player3").src = "image/" + getRandomImg();
}

查看Array.splice了解更多信息

【讨论】：