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>");
});

Answer 2

因为你在数组的每个元素上循环，所以你得到了所有元素。尝试在单击功能中不使用 $.each 会更好。

Answer 3

如果您只想在单击选择器时添加一个值$(".target")，您应该执行类似的操作

  // assuming you want the last value in the array.
  var value = array[array.length-1]; // could also do $(this).siblings('p').text()
  $("#cart ul").append("<li>"+value+"</li>");

看起来你甚至可能不需要你的数组，（除非它也被其他一些函数使用）。

Answer 4

LIVE DEMO

$(function(){

  var array = [];

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

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

  });

});