javascript - 如何将所有输入元素作为单独的元素推送到数组？

Question

我正在尝试将输入栏中的多个项目作为单独的项目推送到数组中。但是，我只能将它们作为一个组合项目推送。

因此，即使我将 3 个名称插入数组中，它们也将是数组中的一个元素，而不是三个单独的元素。

我的问题与将多个项目插入数组的问题不同，因为我的问题更多的是如何将输入栏中的元素作为单独的项目插入数组

$("#people").on('click', '.list-group-item', function(){
  var peopleName = $(this).text();
  var input = $("#friendsNames");
  input.val(input.val() + peopleName + " ");
  
  $("#button").click(function(){
  //How do I grap each individual name that has been added to input, and push it into the array?
    var allNames = [];
    allNames.push();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list-group-item" id="people">
  <li class="list-group-item"><a href="#">Name1</a></li>
  <li class="list-group-item"><a href="#">Name2</a></li>
  <li class="list-group-item"><a href="#">Name3</a></li>
  <li class="list-group-item"><a href="#">Name4</a></li>
</ul>
  <input type="text" name="namesOfFriend" id="friendsNames" value=""  />
<button id="button">Button</button>

Answer 1

在点击事件中尝试这个Array#push。并将数组声明为global。并在外部声明按钮点击事件，而不是在内部人员中 点击

var allNames = [];
$("#people").on('click', '.list-group-item', function() {
  var peopleName = $(this).text();
  var input = $("#friendsNames");
  input.val(input.val() + peopleName + " ");
  allNames.push(peopleName);

});
$("#button").click(function() {
  console.log(allNames)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list-group-item" id="people">
  <li class="list-group-item"><a href="#">Name1</a></li>
  <li class="list-group-item"><a href="#">Name2</a></li>
  <li class="list-group-item"><a href="#">Name3</a></li>
  <li class="list-group-item"><a href="#">Name4</a></li>
</ul>
<input type="text" name="namesOfFriend" id="friendsNames" value="" />
<button id="button">Button</button>

或者使用split("")方法从输入到数组。它足以从输入值创建数组

$("#people").on('click', '.list-group-item', function() {
  var peopleName = $(this).text();
  var input = $("#friendsNames");
  input.val(input.val() + peopleName + " ");
});
$("#button").click(function() {
 var allNames = $("#friendsNames").val().trim().split(" ")
    console.log(allNames)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list-group-item" id="people">
  <li class="list-group-item"><a href="#">Name1</a></li>
  <li class="list-group-item"><a href="#">Name2</a></li>
  <li class="list-group-item"><a href="#">Name3</a></li>
  <li class="list-group-item"><a href="#">Name4</a></li>
</ul>
<input type="text" name="namesOfFriend" id="friendsNames" value="" />
<button id="button">Button</button>