Случайное добавление классов к элементам с использованием Math.floor, Math.Random

Задача

У меня 60 хоккей .players, Есть десять вратарей (игроки с номерами 1-10), двадцать защитников (игроки с номерами 11-30) и тридцать нападающих (игроки с номерами 31-60). По нажатию кнопки .btn--random должен случайно добавить класс is-active в two goalie, six defensemen and twelve forwards и удалить класс is-inactive

проблема

  • Когда я генерирую числа, используя серию для циклов и комбинацию Math.floor(Math.random()) иногда генерируемые случайные числа совпадают, что не может произойти, поскольку каждый игрок уникален и может быть выбран только один раз.

    Я думал о forEach или же indexOf чтобы помочь решить эту проблему, но я довольно заблуждаюсь о том, как сгенерированные числа добавят класс 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>
Источник

3 ответа

Решение

Не могли бы вы взглянуть на этот код:

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

Источник

Вы используете правильную функцию для генерации случайного числа, но вам нужно указать диапазон, между которым вы хотите случайные числа.

Вы должны использовать следующее:

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 - номер возможного результата

Источник

Вот решение lodash

https://jsfiddle.net/whxtx58v/

Важным моментом здесь является эта функция:

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

То, что это делает, занимает минимальное и максимальное количество ваших игроков, генерирует массив и перемешивает его. Затем, чтобы получить двух случайных игроков, вы можете просто взять первые два элемента.

Источник
Другие вопросы по тегам