javascript - jQuery每个数组索引附加到div

Question

我正在尝试将我制作的数组的值附加到另一个div中，但是当我附加数组值时，它附加了数组的所有值，而不仅仅是我添加的值(通过单击)，任何建议那就太好了，提前致谢!

HTML

<div id="products">
    <ul>
        <li><p>Lorem 1</p><button class="target">Add</button></li>
        <li><p>Lorem 2</p><button class="target">Add</button></li>
    </ul>
</div>
<div id="cart">
    <ul>

    </ul>
</div>

jQuery

$(document).ready(function(){

    var array = Array();

    $(".target").click(function() {

        array.push($(this).siblings('p').text());

        $.each(array, function(index, value) {

            $("#cart ul").append("<li>"+value+"</li>");
        });


    });
});

当我单击“添加”时，会显示第一个按钮

洛雷姆1

但是当我单击第二个按钮上的添加时，它会显示

洛勒姆1洛雷姆1洛雷姆2

Answer 1

您正在将项目添加到数组中，如果您想保留已添加项目的列表，这是有意义的，但是当您将项目添加到列表中时，您将循环遍历数组，这将使其将所有项目添加到那里已经存在项目。

您可以只添加最后一项:

array.push($(this).siblings('p').text());
$("#cart ul").append("<li>" + array[array.length - 1] + "</li>");

或者您可以在添加项目之前清除列表:

array.push($(this).siblings('p').text());
$("#cart ul").empty();
$.each(array, function(index, value) {
  $("#cart ul").append("<li>" + value + "</li>");
});