时间戳

首页 > 解决方案 > 如何从一个数组中移动对象并系统地添加它循环并添加到多个数组中

javascript - 如何从一个数组中移动对象并系统地添加它循环并添加到多个数组中

问题描述

我有一个主要的数组：

const mainArray = ["user1","user2","user3","user4","user5","user6","user7"]

我想 pop() 数组 mainArray[0] 的第一个索引并将其放入一个新数组 const group1 = []

但是，组的数量（新的空数组）由用户输入动态设置。

然后如何循环遍历这些组并从 mainArray 添加，直到为空？
示例： 用户输入 3 组

group1= ["user1","user4","user7"]
group2= ["user2","user5"]
group3= ["user3","user6"]

或4组

group1= ["user1","user5"]
group2= ["user2","user6"]
group3= ["user3","user7"]
group4= ["user4"]

因此，每次按下按钮时，都会一次占用一个用户并将其分配给一个组。

这是学校项目的一部分。（随机团队生成器）。我已经设法动态地获取名称 user1 的用户输入。然后我已经对它们进行了洗牌，所以现在只是分配给这些组。我确实看到了如何从一个数组移动到另一个数组的代码，但没有看到组数量可以更改的多个组。

试图复制这个想法 = https://www.randomlists.com/team-generator。使用香草 Javascript。

以下是我当前的代码（不漂亮） - 只是想了解我上面发布的概念：

const person = document.getElementById("name-input");
const mainList = document.querySelector(".main-name-list");


//Add person to main List
function addPerson() {
  let newPerson = person.value;
  if (person.value !== "") {
    const li = document.createElement("li");
    const span = document.createElement("span");
    li.className = "list-person-name";
    span.className = "person-name";
    span.appendChild(document.createTextNode(`${newPerson}`));
    li.appendChild(span);

    li.addEventListener("click", function (e) {
      e.target.remove();
    });
    mainList.appendChild(li);

    // Clear input
    person.value = "";
  } else {
    alert("Please add a name");
  }
}
li {
  border: grey 1px solid;
}
ul {
  list-style-type: none;
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margins */
}

.person-main-list {
  border: blue 2px solid;
  width: 500px;
  margin: 0 auto;
}
span {
  cursor: pointer;
}

.assign-buttons {
  margin: 0 auto;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- FontAwesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
    />
    <!-- Bootstrap 4.6-->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
      integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
      crossorigin="anonymous"
    />
    <!-- Custom Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="container">
      <h1>Random Group Generator</h1>
      <hr />
      <!-- Input Name & Group Container  Start-->
      <div class="row">
        <div class="input-group mb-3">
          <input
            id="name-input"
            type="text"
            class="col-4 form-control"
            placeholder="Person's Name"
          />
          <div class="input-group-append">
            <button
              class="btn btn-secondary mr-2"
              type="button"
              onclick="addPerson()"
            >
              ADD
            </button>
          </div>
          <input
            id="group-input"
            type="text"
            class="col-2 form-control"
            placeholder="Amount of Groups"
          />
          <div class="input-group-append">
            <button
              class="btn btn-secondary"
              type="button"
              onclick="setGroup()"
            >
              SET
            </button>
          </div>
        </div>
      </div>
      <!-- Input Name & Group End -->
      <!-- Main Name List Start -->
      <button
        onclick="getTotalPeople()"
        class="btn btn-dark btn-sm float-right"
      >
        Total people
      </button>
      <span class="display-4 total-person-mainlist card col-2">0</span>
      <h4 class="float-left">Main List</h4>
      <button class="btn btn-primary" onclick="Assign()">Assign</button>
      <button
        onclick="clearMainList()"
        id="clearBtn"
        type="button"
        class="btn btn-danger btn-sm float-right"
      >
        Clear All
      </button>
      <br />
      <hr />
      <div class="row">
        <ul class="main-name-list m-1">
          <li class="list-person-name card">
            <span class="person-name"
              >It's a dummy todo item <i class="fas fa-trash float-right"></i
            ></span>
          </li>
        </ul>
      </div>
      <hr />
      <div class="assign-buttons">
        <button
          onclick=""
          id="assignBtn"
          type="button"
          class="btn btn-primary btn-sm"
          disabled
        >
          Assign Random Person To Group
        </button>
        <button
          onclick=""
          id="assignBtn"
          type="button"
          class="btn btn-primary btn-sm"
          disabled
        >
          Assign All Randomly To Groups
        </button>
      </div>
      <div class="row">
        <!-- <div class="col-4 card">
            <span>${newPerson} <i class="fas fa-trash float-right"></i></span>
        </div> -->
        <!-- JUST A PLACEHOLDER, will not use this -->
        <div class="group-container">
          <ul class="all-groups">
            <li class="group-item">
              Group1
              <ul class="main-name-list">
                <!-- <li class=" list-person-name"">
                  <span class="person-name">It's a dummy todo item</span>
                </li> -->
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
      crossorigin="anonymous"
    ></script>
    <script src="main.js"></script>
  </body>
</html>

标签： javascriptarrayssortingassignment-operator

解决方案

推荐阅读