為數組中的每個元素添加一個隨機數

Question

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


<head>
    <meta charset="UTF-8">
    <title>The Lord of the Rings - Game</title>

    <link rel="stylesheet" type="text/css" href="assets/css/reset.css">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>

<body>


    <div id="game-container">

        <h1>Battle!</h1>


        <div id="counters">
            <div id="total-score"></div>
            <div id="target-score"></div>
        </div>


        <div id="images-container">
            <img src="assets/images/Aragorn.jpeg" alt="Aragorn" class="LOTR-characters" id="character1">
            <img src="assets/images/Legolas.jpeg" alt="Legolas" class="LOTR-characters" id="character2">
            <img src="assets/images/Gimley.jpeg" alt="Gimley" class="LOTR-characters" id="character3">
            <img src="assets/images/Gandalf.jpeg" alt="Gandalf" class="LOTR-characters" id="character4">
        </div>

        <div id="wins-losses">
            <h2>Wins and losses go here</h2>
        </div>

    </div>



    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="assets/javascript/game.js"></script>
</body>

</html>


var targetNumber;

var numbersAdded = [];

numbersAdded.push(char1 = $("#character1"));
numbersAdded.push(char2 = $("#character2"));
numbersAdded.push(char3 = $("#character3"));
numbersAdded.push(char4 = $("#character4"));


// Create a function that gives a random number between 1 - 12 
// and assigns it to a variable
function randomNum() {
var randomNumber = Math.floor( Math.random() * 12 ) + 1;
    console.log("Random number between 1 & 12 is: " + randomNumber);
    return randomNumber;
}

randomNum();

// loop through items in array and assign random number 
for (i = 0; i < numbersAdded.length; i++) {
    numbersAdded[i] =+ randomNum;
}

我試圖向數組 numberAdded 中的每個元素添加一個隨機數。 每個元素實際上是 html 中的一個 img，我將變量分配給並推送到數組。

是否可以遍歷該數組並為每個圖像分配一個我可以點擊的隨機數？ 還是我必須一一執行？

Answer 1

您可以使用映射為數組的每個元素添加一個隨機數。

numbersAdded = numbersAdded.map(n => n + (Math.floor( Math.random() * 12 ) + 1))

但我不太確定你想對圖像做什么。 如果你想使用 jQuery 來修改每個圖像

$(".LOTR-characters").each(function() {
    $(this) //Is a jQuery object that can manipulate the image.
})

Answer 2

這是一個點擊處理程序，運行它可以工作，但沒有圖像。 您仍然可以單擊它們。

 $(".LOTR-characters").click(function() { console.log(this.alt + ' scored ' + randomNum()); }); function randomNum() { var randomNumber = Math.floor( Math.random() * 12 ) + 1; return randomNumber; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="assets/images/Aragorn.jpeg" alt="Aragorn" class="LOTR-characters" id="character1"> <img src="assets/images/Legolas.jpeg" alt="Legolas" class="LOTR-characters" id="character2"> <img src="assets/images/Gimley.jpeg" alt="Gimley" class="LOTR-characters" id="character3"> <img src="assets/images/Gandalf.jpeg" alt="Gandalf" class="LOTR-characters" id="character4">

為數組中的每個元素添加一個隨機數

問題描述

2 個解決方案

解決方案1
0 2018-09-15 04:52:50

解決方案2
0 已采納 2018-09-15 05:10:59

為數組中的每個元素添加一個隨機數

問題描述

2 個解決方案

解決方案1 0 2018-09-15 04:52:50

解決方案2 0 已采納 2018-09-15 05:10:59

解決方案1
0 2018-09-15 04:52:50

解決方案2
0 已采納 2018-09-15 05:10:59