Question

我想用输入中的数据创建一个动态数组。后来我想将收集的数据写入div中。我怎么能这样做？

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<p>Click the button to add a new element to the array.</p>
<input type="text" id="data">
<button onclick="myFunction()">Try it</button>
<button onclick="myFunction2()">Add</button>
<p id="demo"></p>
<script>
   var fruits = [];
   function myFunction() {
     var x=$("#data").val();
     fruits.push(x); 
     $("#data").val("");
     for(var i=0;i<fruits.length;i++) {
       $("#demo").html(fruits[i]);
     }
    }

</script>
</body>
</html>

Answer 1

尝试附加htmlString。你正在取代它。

var htmlString = ""
for(var i=0;i<fruits.length;i++) {
  htmlString += fruits[i];
}
$("#demo").html(htmlString);

完整的代码将是，

<script>
  var fruits = [];
  function myFunction() {
   var x=$("#data").val();
   fruits.push(x); 
   $("#data").val("");
    var htmlString = ""
    for(var i=0;i<fruits.length;i++) {
      htmlString += fruits[i];
    }
    $("#demo").html(htmlString);
  }
</script>

完美的方法是，

<!DOCTYPE html>
<html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <body>
    <p>Click the button to add a new element to the array.</p>
    <input type="text" id="data">
    <button id="try">Try it</button>
    <button>Add</button>
    <p id="demo"></p>
    <script>
      var fruits = [];
      var data = $("#data");
      var demo = $("#demo");
      $("#try").click(function(){
         fruits.push(data.val());
         data.val("");
         demo.html(fruits.join(" "));
      });
    </script>
  </body>
</html>

Answer 2

我不确定究竟要尝试什么，但你需要为输入设置一个标准，例如逗号分隔值。

或者根据空格字符拆分它们。

然后按照以下方式进行，

<script>
    var fruits = [];
    function myFunction() {
       var x=$("#data").val().split(' '); // Use .split(',') if you want to split them on basic of a comma
       $("#data").val("");
       for(var i=0;i<x.length;i++) {
          fruits.push(x[i]);
       }
       // Now you have the array containing the fruits, add them to DOM
       $("#demo").html(fruits.join('<br/>')); // Single fruit per line
    }
</script>

Jquery动态数组

2 个答案: