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


    });
});

当我点击添加时，说出它显示的第一个按钮

Lorem 1

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

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

jQuery每个数组索引附加到div

4 个答案: