[英]How to append only one item at a time to an array?
I am trying to add one element to an array that gets appended to an HTML div one at a time each time a user clicks a button. 我试图将一个元素添加到每次用户单击按钮时一次附加到HTML div的数组中。 However, each time I try, multiple instances of the element gets added to the array and it displays way more than what I want. 但是,每次尝试时,该元素的多个实例都会添加到数组中,并且显示的方式超出了我想要的方式。 How do I only add one at a time? 如何一次只添加一个?
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 html
<div class="add-new-info">Click to add</div>
<div class="info-container"></div>
As people have commented, you are adding to the array and then appending. 正如人们评论的那样,您要添加到数组,然后追加。
You can try 你可以试试
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>
Or this: 或这个:
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>
var testArray = [];
let 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);
});
<div class="add-new-info">Click to add</div>
<div class="info-container"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.