javascript - 使用 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为了帮助解决这个问题，但我对生成的数字如何添加类(class)感到非常困惑的is-active到 60 名名单中相应的球员玩家。 具体是这一行<div class="picked is-inactive">应该在 HTML 中更改

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

请您看一下这段代码:

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