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

时间:2017-05-30 08:17:22

标签: javascript jquery arrays

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

因此,即使我将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>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:3)

在click事件中尝试此Array#push。并将数组声明为global。并在外部声明按钮点击事件,而不是在people内部点击

&#13;
&#13;
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)
});
&#13;
<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>
&#13;
&#13;
&#13;

使用split(" ")方法从输入到数组。足以从input

创建数组

&#13;
&#13;
$("#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)
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

使用split&amp;的concat:

&#13;
&#13;
$("#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 = [];
    var f = $("#friendsNames").val().trim();
    allNames = allNames.concat(f.split(' '));
    console.log(allNames)
  });
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

您需要在click事件之外定义数组,因为单击它时总是将其清空。

另外,你需要一个变量来推入数组。 例如[:rindex, :index].map { |sym| [0,1,2].send(sym, { |x| x %2 == 0 }) }