使用 Math.floor、Math.Random 向元素随机添加类

Question

目标

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

问题

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

  我考虑过forEach 或indexOf 来帮助解决这个问题， 但我对生成的数字将如何添加课程感到非常迷茫 的is-active 到 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 (sn-p)

<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

你能看一下这段代码吗：

$(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)
}

<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/>

Answer 2

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

您应该使用以下内容：

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 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);
}

它的作用是获取玩家编号的最小值和最大值，生成一个数组并对其进行洗牌。那么要得到两个随机玩家，你可以简单地取前两个元素。