时间戳

首页 > 解决方案 > 如何一次只将一项附加到数组中？

javascript - 如何一次只将一项附加到数组中？

问题描述

我正在尝试将一个元素添加到一个数组中，该数组每次用户单击一个按钮时都会一次附加到一个 HTML div 中。但是，每次我尝试时，都会将元素的多个实例添加到数组中，并且它显示的方式比我想要的要多。如何一次只添加一个？

var testArray = [];
var toBeAdded =
  '<div class="grid-x">' +
  '<div class="cell medium-2">' +
  "<p>Date</p>" +
  "</div>" +
  '<div class="cell medium-7">' +
  "<h4>Title</h4>" +
  "</div>" +
  '<div class="cell medium-3">' +
  "<h5>Delete</h5>" +
  "</div>" +
  "</div>";

$(".add-new-info").click(function() {
  testArray.push(toBeAdded);
  $(".info-container").append(testArray);
});

html

<div class="add-new-info">Click to add</div>
<div class="info-container"></div>

标签： javascriptjqueryhtml

解决方案

正如人们所评论的那样，您正在添加到数组中然后追加。

你可以试试

var testArray = [];
var toBeAdded =
  '<div class="grid-x">' +
  '<div class="cell medium-2">' +
  "<p>Date</p>" +
  "</div>" +
  '<div class="cell medium-7">' +
  "<h4>Title</h4>" +
  "</div>" +
  '<div class="cell medium-3">' +
  "<h5>Delete</h5>" +
  "</div>" +
  "</div>";

$(".add-new-info").click(function() {
  testArray.push(toBeAdded);
  $(".info-container").append(toBeAdded);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="add-new-info">Click to add</div>
<div class="info-container"></div>

或这个：

var testArray = [];
var toBeAdded =
  '<div class="grid-x">' +
  '<div class="cell medium-2">' +
  "<p>Date</p>" +
  "</div>" +
  '<div class="cell medium-7">' +
  "<h4>Title</h4>" +
  "</div>" +
  '<div class="cell medium-3">' +
  "<h5>Delete</h5>" +
  "</div>" +
  "</div>";

$(".add-new-info").click(function() {
  testArray.push(toBeAdded);
  $(".info-container").html(testArray);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="add-new-info">Click to add</div>
<div class="info-container"></div>

推荐阅读