Question

当我尝试遍历我的数组时，结果是每次单击按钮时都会显示整个数组（加倍）。相反，我希望显示数组时只附加新项目。

谢谢：^）

<!DOCTYPE HTML>
<html>
<head>
    <title>Checklist</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script>
    $(function() {
      var arr = [];
      $("button").click(function() {
        arr.push($(":text").val());
        $(":text").val("");
        for(i in arr){
            $("#x").append(arr[i] + "<br>");
        }
        //x.text(JSON.stringify(arr));
      })
    })
    </script>
</head>
<body>  

    <input type="text" id="item" placeholder="Enter an item">
    <button id="add">Add Item</button>
    <br>
    <div id="x"></div>
</body>
</html>

Answer 1

为什么不获取数组的最后一个元素，然后将其附加，而不是将其用于... in循环：

＆＃13;

$(function() {
  var arr = [];
  $("button").click(function() {
    arr.push($(":text").val());
    $(":text").val("");
    $("#x").append(arr[arr.length - 1] + "<br>");
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="item" placeholder="Enter an item">
<button id="add">Add Item</button>
<br>
<div id="x"></div>

＆＃13;

Answer 2

在向$("#x").empty()追加价值之前致电#x;将for循环替换为for..in循环

＆＃13;

<!DOCTYPE HTML>
<html>
<head>
    <title>Checklist</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script>
    $(function() {
      var arr = [];
      $("button").click(function() {
        arr.push($(":text").val());
        $(":text").val("");
        $("#x").empty();
        for(var i = 0; i < arr.length; i++){
            $("#x").append(arr[i] + "<br>");
        }
        //x.text(JSON.stringify(arr));
      })
    })
    </script>
</head>
<body>  

    <input type="text" id="item" placeholder="Enter an item">
    <button id="add">Add Item</button>
    <br>
    <div id="x"></div>
</body>
</html>

＆＃13;

或者，您可以使用arr.length -1

＆＃13;

<!DOCTYPE HTML>
<html>
<head>
    <title>Checklist</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script>
    $(function() {
      var arr = [];
      $("button").click(function() {
        arr.push($(":text").val());
        $(":text").val("");
        $("#x").append(arr[arr.length - 1] + "<br>");
      })
    })
    </script>
</head>
<body>  

    <input type="text" id="item" placeholder="Enter an item">
    <button id="add">Add Item</button>
    <br>
    <div id="x"></div>
</body>
</html>

＆＃13;

Answer 3

试试这个

  $(function() {
      var arr = [];
      $("button").click(function() {
          arr.push($(":text").val());
          $(":text").val("");
          $("#x").append(arr.slice(-1) + '<br>');
      })
    })

Answer 4

仅附加新项目
但保持阵列

＆＃13;

jQuery(function($) {                    // a better way to DOM ready

  var arr = [],
      item = $("#item"),
      x = $("#x"), 
      y = $("#y");                      // Cache elements

  $("button").click(function() {

    var val = item.val();               // get the input value
    arr.push(val);                      // OK, you appended to array
    item.val("");                       // Reset input 
    x.append(val + "<br>");             // the new item appended only
    y.text(JSON.stringify(arr));        // And test our array
  });
  
});

＆＃13;

#y{background: #eee;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="item" placeholder="Enter an item">
<button id="add">Add Item</button>
<br>
<div id="x"></div>
<div id="y"></div>

＆＃13;

将JavaScript数组显示到HTML div中的问题

4 个答案: