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

Question

Objective

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

问题

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

我想过forEach或indexOf来帮助解决这个问题，但我对生成的数字如何添加 class 感到很迷惑 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（片段）

<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

能否请您看一下这段代码：

$(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 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 向元素随机添加类

Randomly adding classes to elements using Math.floor, Math.Random

javascript

random

jquery

for-loop

floor

Objective

问题

scripts.js - 这就是我的进展

index.html（片段）

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

Randomly adding classes to elements using Math.floor, Math.Random

javascript

random

jquery

for-loop

floor

Objective

问题

scripts.js - 这就是我的进展

index.html（片段）

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