0

我正在尝试使用 jQuery 构建一个随机团队创建者。我已经完成了函数的工作，它创建了随机团队，但现在我正试图将创建的团队的玩家放入按ul. 我试过了，$('#team1 li').html( team );但整个团队都显示在一个li元素中。如何在一个li元素中显示一个玩家？

这是HTML代码： 

<form>
    <div class="teamsNumber">How many teams do you want to create?<br>
        <input type="text" name="teamsNumber"><br>
    </div>
    <br>
    <div class="players">Players:<br>
        <textarea rows="12" cols="20"></textarea>
    </div>
    <input type="submit" value="Submit"><br>
</form>

<div class="resultingTeams">
    <h1>Team 1</h1>
    <ul id="team1">
        <li id="p1">player 1</li>
        <li id="p2">player 2</li>
        <li id="p3">player 3</li>
        <li id="p4">player 4</li>
        <li id="p5">player 5</li>
    </ul>
</div>

这是jQuery代码：

$(document).ready(function () {

    $("form").submit(function (event) {
        event.preventDefault();

        var playerNames = $(".players textarea").val();
        var players = playerNames.split("\n");
        var playersAmount = (players.length);
        var teamsAmount = $(".teamsNumber input").val();
        var mixedPlayers = [];
        var minIndex = 0;
        var maxIndex = playersAmount - 1;

        for (i = 0; i < playersAmount; i++) {

            var random = getRandom(minIndex, maxIndex);

            while (mixedPlayers[random] !== undefined) {
                random = getRandom(minIndex, maxIndex);
            }

            mixedPlayers[random] = players[i];

        }

        var breakpoint = Math.ceil(playersAmount / teamsAmount);
        $('#resultingTeams').html("");
        for (i = 0; i < teamsAmount; i++) {
            var team = mixedPlayers.splice(0, breakpoint);

            //$('.resultingTeams').append(" ");
            console.log(team)
        }

        function getRandom(min, max) {
            return Math.round(Math.random() * (max - min) + min);
        }

        $('#team1 li').html(team);
    });
})

https://jsfiddle.net/uybgdhcp/

4

4 回答 4

0

尝试使用。并将Array#forEach声明team=[]为数组。然后与团队一起推送数据。

演示 jsfiddle

$("form").submit(function(event) {
  event.preventDefault();
var team=[];
  var playerNames = $(".players textarea").val();
  var players = playerNames.split("\n");
  var playersAmount = (players.length);
  var teamsAmount = $(".teamsNumber input").val();
  var mixedPlayers = [];
  var minIndex = 0;
  var maxIndex = playersAmount - 1;

  for (i = 0; i < playersAmount; i++) {

    var random = getRandom(minIndex, maxIndex);

    while (mixedPlayers[random] !== undefined) {
      random = getRandom(minIndex, maxIndex);
    }

    mixedPlayers[random] = players[i];

  }

  var breakpoint = Math.ceil(playersAmount / teamsAmount);
  $('#resultingTeams').html("");
  for (i = 0; i < teamsAmount; i++) {
    team.push(mixedPlayers.splice(0, breakpoint));
    console.log(team)
  }

  function getRandom(min, max) {
    return Math.round(Math.random() * (max - min) + min);
  }

  team.forEach(function(a, b) {
    $('#team1 li').eq(b).html(a);
  })



});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form>
  <div class="teamsNumber">How many teams do you want to create?<br>
    <input type="text" name="teamsNumber"><br>
  </div>
  <br>
  <div class="players">Players:<br>
    <textarea rows="12" cols="20"></textarea>
  </div>
  <input type="submit" value="Submit"><br>
</form>

<div class="resultingTeams">
  <h1>Team 1</h1>
  <ul id="team1">
    <li id="p1">player 1</li>
    <li id="p2">player 2</li>
    <li id="p3">player 3</li>
    <li id="p4">player 4</li>
    <li id="p5">player 5</li>
  </ul>
</div>

于 2017-06-16T14:36:40.837 回答
0

$('#team1 li').html( team );本质上选择列表<li />中的所有元素#team1并将整个团队列表放入每个元素中。

您可能希望在每个列表项中放置一名团队成员。循环遍历团队成员并将他们一个一个放入列表中可以通过以下方式实现：

team.forEach(function(teamMember, index) {
  $('#team1 li')         // Selects all the list items in #team1 list
    .eq(index)           // Get's the specific list item at position `index`
    .html(teamMember);   // Puts the contents of `teamMember` in that list item
});
于 2017-06-16T14:36:46.753 回答
0

谢谢大家的帮助！我按照克里斯 G 说的做了：）

function getRandom(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

$(document).ready(function() {
  $("form").submit(function(event) {
    event.preventDefault();

    var playerNames = $(".players textarea").val();
    var players = playerNames.split("\n");
    var playersAmount = (players.length);
    var teamsAmount = $(".teamsNumber input").val();
    var mixedPlayers = [];
    var minIndex = 0;
    var maxIndex = playersAmount - 1;

    for (i = 0; i < playersAmount; i++) {
      var random = getRandom(minIndex, maxIndex);
      while (mixedPlayers[random]) {
        random = getRandom(minIndex, maxIndex);
      }
      mixedPlayers[random] = players[i];
    }

    var breakpoint = Math.ceil(playersAmount / teamsAmount);
    $('.resultingTeams').html("");
    for (i = 0; i < teamsAmount; i++) {
      var team = mixedPlayers.splice(0, breakpoint);
      var $team = team.map((name) => $("<li>").text(name));
      $('.resultingTeams').append($("<h1>").text("Team " + (i + 1)));
      $('.resultingTeams').append($("<ul>").html($team));
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="teamsNumber">How many teams do you want to create?
    <br>
    <input type="text" name="teamsNumber" value="3">
    <br>
  </div>
  <br>
  <div class="players">Players:
    <br>
    <textarea rows="12" cols="20">Alice
Bob
Chris
Darren
Eugene
Felix</textarea>
  </div>
  <input type="submit" value="Submit">
  <br>
</form>

<div class="resultingTeams"></div>

function getRandom(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

$(document).ready(function() {
  $("form").submit(function(event) {
    event.preventDefault();

    var playerNames = $(".players textarea").val();
    var players = playerNames.split("\n");
    var playersAmount = (players.length);
    var teamsAmount = $(".teamsNumber input").val();
    var mixedPlayers = [];
    var minIndex = 0;
    var maxIndex = playersAmount - 1;

    for (i = 0; i < playersAmount; i++) {
      var random = getRandom(minIndex, maxIndex);
      while (mixedPlayers[random]) {
        random = getRandom(minIndex, maxIndex);
      }
      mixedPlayers[random] = players[i];
    }

    var breakpoint = Math.ceil(playersAmount / teamsAmount);
    $('.resultingTeams').html("");
    for (i = 0; i < teamsAmount; i++) {
      var team = mixedPlayers.splice(0, breakpoint);
      var $team = team.map((name) => $("<li>").text(name));
      $('.resultingTeams').append($("<h1>").text("Team " + (i + 1)));
      $('.resultingTeams').append($("<ul>").html($team));
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="teamsNumber">How many teams do you want to create?
    <br>
    <input type="text" name="teamsNumber" value="3">
    <br>
  </div>
  <br>
  <div class="players">Players:
    <br>
    <textarea rows="12" cols="20">Alice
Bob
Chris
Darren
Eugene
Felix</textarea>
  </div>
  <input type="submit" value="Submit">
  <br>
</form>

<div class="resultingTeams"></div>

于 2017-06-19T08:10:27.613 回答
0

您可以将每个团队数组映射到一个<li>s 数组并从那里组成 HTML。

function getRandom(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

$(document).ready(function() {
  $("form").submit(function(event) {
    event.preventDefault();

    var playerNames = $(".players textarea").val();
    var players = playerNames.split("\n");
    var playersAmount = (players.length);
    var teamsAmount = $(".teamsNumber input").val();
    var mixedPlayers = [];
    var minIndex = 0;
    var maxIndex = playersAmount - 1;

    for (i = 0; i < playersAmount; i++) {
      var random = getRandom(minIndex, maxIndex);
      while (mixedPlayers[random]) {
        random = getRandom(minIndex, maxIndex);
      }
      mixedPlayers[random] = players[i];
    }

    var breakpoint = Math.ceil(playersAmount / teamsAmount);
    $('.resultingTeams').html("");
    for (i = 0; i < teamsAmount; i++) {
      var team = mixedPlayers.splice(0, breakpoint);
      var $team = team.map((name) => $("<li>").text(name));
      $('.resultingTeams').append($("<h1>").text("Team " + (i + 1)));
      $('.resultingTeams').append($("<ul>").html($team));
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="teamsNumber">How many teams do you want to create?
    <br>
    <input type="text" name="teamsNumber" value="3">
    <br>
  </div>
  <br>
  <div class="players">Players:
    <br>
    <textarea rows="12" cols="20">Alice
Bob
Chris
Darren
Eugene
Felix</textarea>
  </div>
  <input type="submit" value="Submit">
  <br>
</form>

<div class="resultingTeams"></div>

于 2017-06-16T14:42:04.333 回答