目的

Question

目的

我有60个曲棍球.players。有十个守门员（队员编号为1-10），二十名防守队员（队员编号为11-30）和三十名前锋（队员编号为31-60）。点击后，按钮.btn--random应该将课程is-active随机添加到two goalie, six defensemen and twelve forwards并删除课程is-inactive

问题

当我使用一系列for循环和a生成数字时 Math.floor(Math.random())的组合有时是随机的生成的数字是相同的，这是每个玩家都不会发生的独一无二，只能选择一次。

我已经考虑过forEach或indexOf来帮助解决这个问题，但我很遗憾生成的数字会增加这个类 is-active的{{1}}到60的列表中的适当玩家玩家。 具体应该在HTML中更改此行<div class="picked is-inactive">

scripts.js - 这是我已经走了多远

function randomSelection(min, max) {
    $(".btn--random").on("click", function(){

        // There are 60 hockey players in total
        // The first player is 1, the second player is 2 and so on ...
        // There are 10 goalies, 20 defencemen and 30 forwards


        // Generate two numbers between 1-10
        for (var i = 0; i < 2; i++) {
            var randTwo = Math.floor(Math.random()*10 + 1);
            console.log(randTwo);

            if (randTwo === randTwo) {

            }
        };

        // Currently generates six numbers between 1-20
        // Should generate six numbers between 11-30
        for (var i = 0; i < 6; i++) {
            var randSix = Math.floor(Math.random()*20 + 1);
            console.log(randSix);

            if (randSix === randSix) {

            }
        };

        // Currently generates twelve numbers between 1-30
        // Should generate two numbers between 31-60
        for (var i = 0; i < 6; i++) {
            var randTwelve = Math.floor(Math.random()*30 + 1);
            console.log(randTwelve);

            if (randTwelve === randTwelve) {

            }
        };

        // Store the 20 randomly generated numbers into an array?
        var array = []

        // Add the class `is-active` based on the numbers generated
        var player = $(".player");
        var rand = Math.floor(Math.random()* 60);
        player.eq(rand).addClass("is-active");
    });
} randomSelection();

index.html（摘录）

<button class="btn btn--random">Random</button>

<div class="player player--goalie year--1990">
                    <div class="tooltip tooltip--tall">
                        <p class="tooltip__name">Brian Elder</p>
                        <p class="tooltip__hometown"><span>Hometown:</span> Oak Lake, Man.</p>
                        <p class="tooltip__years"><span>Years Played:</span> 1992-1997</p>
                        <div class="tooltip__stats--inline">
                            <div class="stats__group stats--games">
                                <p class="stats__header">GP</p>
                                <p class="stats__number stats__number--games">110</p>
                            </div>

                            <div class="stats__group stats--goalsag">
                                <p class="stats__header">GA</p>
                                <p class="stats__number stats__number--goalsag">2.00</p>
                                <p class="stats__number">3.12</p>
                                <p class="stats__number">3.46</p>
                                <p class="stats__number">2.70</p>
                            </div>

                            <div class="stats__group stats--savep">
                                <p class="stats__header">SAV%</p>
                                <p class="stats__number stats__number--savep">.909</p>
                                <p class="stats__number">.886</p>
                                <p class="stats__number">.884</p>
                                <p class="stats__number">.906</p>
                            </div>

                            <div class="stats__group stats--shutouts">
                                <p class="stats__header">SO</p>
                                <p class="stats__number">0</p>
                                <p class="stats__number">0</p>
                                <p class="stats__number stats__number--shutouts">3</p>
                                <p class="stats__number">2</p>
                            </div>
                        </div> <!-- tooltip__stats--inline -->
                    </div> <!-- tooltip -->
                    <div class="player__headshot player--elder">
                        <div class="picked is-inactive"><i class="fa fa-star" aria-hidden="true"></i></div>
                    </div>
                    <p class="player__name">Brian Elder</p>
                    <p class="player__position">Goalie</p>
                </div>

Answer 1

您使用正确的函数生成随机数，但您需要指定您想要随机数的范围。

您应该使用以下内容：

Math.floor(Math.random()*30 + 31)    //generate random number between 31-60
Math.floor(Math.random()*20 + 11)    //generate random number between 11-30

31/21是起始编号

30/20是可能结果的数量

Answer 2

请你看一下这段代码：

＆＃13;

$(document).ready(function() {

  $(".btn--random").on("click", function() {

    var goalies_array = getRandomNumbers(1, 10, 2);
    $(".goalies").text(goalies_array.join(","));
    var defensemen_array = getRandomNumbers(11, 30, 6);
    $(".defensemen").text(defensemen_array.join(","));
    var forwards_array = getRandomNumbers(31, 60, 12);
    $(".forwards").text(forwards_array.join(","));

    var players_array = goalies_array.concat(defensemen_array).concat(forwards_array);

    // Add the class `is-active` based on the numbers generated
    var player = $(".player");
    $(".is-active").removeClass("is-active").addClass("is-inactive");


    $.each(players_array, function(index, value) {
      var player_index = value - 1; //we are using 0 based indexing
      player.eq(player_index).find(".is-inactive").removeClass("is-inactive").addClass("is-active");
    });


  });
});


function getRandomNumbers(start, end, howMany) {
  var arr = [];
  for (var i = start, j = 0; i <= end; j++, i++)
    arr[j] = i
  arr.sort(function() {
    return Math.floor((Math.random() * 3) - 1)
  });

  return arr.splice(0, howMany)
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button class="btn btn--random">Random</button>
<br/>
<br/>Goalies
<div class="goalies"></div>
<br/>Defensemen
<div class="defensemen"></div>
<br/>Forwards
<div class="forwards"></div>
<br/>

＆＃13;

Answer 3

这是一个lodash解决方案

https://jsfiddle.net/whxtx58v/

重要的一点是这里的功能：

function generateRoster(min, max){
    var players = [];
  for(var i = min; i <= max; i++){
    players.push(i);
  }
  return _.shuffle(players);
}

这样做会占用玩家数量的最小值和最大值，生成一个阵列并将其随机播放。然后要获得两个随机玩家，你可以简单地选择前两个元素。

使用Math.floor，Math.Random

目的

问题

scripts.js - 这是我已经走了多远

index.html（摘录）

3 个答案: