javascript .push() 每次都插入同一个对象

Question

我不知道我做错了什么，但我无法将对象推送到现有对象。我有盒子，还有计算器，……点击盒子“.items”

...
<div data-itemid="2" data-itemprice="43.00" class="items" style="margin:5px;background:#f50;width:100px;height:100px; display:inline-block;"><div><p>Upton</p></div></div>
<div data-itemid="4" data-itemprice="44.00" class="items" style="margin:5px;background:#f50;width:100px;height:100px; display:inline-block;"><div><p>Marvin</p></div></div>
...

定义金额后

 <div>
    <div class="to_pay"></div>
    <hr>
        <div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">0</div>
<div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">1</div><div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">2</div><div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">3</div><div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">4</div><div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">5</div><div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">6</div><div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">7</div><div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">8</div>

    <div class="calc-number" style="width:40px;height:40px;margin:3px;background:blue;">9</div><div><button id="ok-order">OK</button><button id="cancel-order">Cancel</button></div><input type="text" id="actual-amount" name="actual-amount" <hr="">

        <div>
            <ul class="ordered-items"><li data-itemid="78">Fulton...8 x 48.00...384 <span class="itemslist-clear">X</span> </li><li data-itemid="92">Kyle...9 x 58.00...522 <span class="itemslist-clear">X</span> </li></ul>
        </div>
        <button id="send-order">ORDER</button>
    </div>

我通过单击“确定”按钮创建了一个包含步骤的列表......未排序的列表工作正常，......但在单击“订单”按钮后，currentOrder 对象 - items 数组有相同的对象，我尝试使用 .length，然后简​​单分配 .. 发生同样的问题。 步骤是...点击boxes =“items”类，点击数字“calc-number”类，点击ok按钮“ok-order”id ...（随机执行），然后点击order按钮“发送订单” ID。

$(document).ready(function() {

    var currentOrder = {
        orderid : 5,
        items: [],
        totalPrice : 0
    }

var activeItem = {
    itemId : 0,
    itemName: '',
    itemAmount : 0,
    itemPrice : 0
}

var desk = $('#front-desktop');
var item = desk.find('.items');
var orderItemList = desk.find('ul.ordered-items');


$(desk).on('click', '.items', function(){
    activeItem.itemId = 0;
    activeItem.itemAmount = 0;
    activeItem.itemPrice = 0;
    item.removeClass('selected-item');
    $(this).toggleClass('selected-item');

    activeItem.itemName = $(this).text();
    activeItem.itemId = $(this)[0].dataset.itemid;
    activeItem.itemPrice = $(this)[0].dataset.itemprice;

});

function addToOrderedItemsList(){
    var tmp_item = '<li data-itemid="'+activeItem.itemId+'">';
    tmp_item += activeItem.itemName+'...'+activeItem.itemAmount+' x '+activeItem.itemPrice+'...'+activeItem.itemAmount*activeItem.itemPrice;
    tmp_item += ' <span class="itemslist-clear">X</span> </li>';
    orderItemList.prepend(tmp_item);
}


$(desk).on('click','.calc-number',function(){
    activeItem.itemAmount = $(this).text();
});

$(desk).on('click','#ok-order',function(){
    currentOrder.items.push(activeItem);
    // currentOrder.items[currentOrder.items.length] = activeItem;
    addToOrderedItemsList();

});

    $(desk).on('click','#send-order',function(){    
        console.log(currentOrder.items);
    });
});

有人知道为什么.push() 不每次都插入对象，为什么每次都将最后一个对象插入每个数组位置？

更新： 我更新了@Pointy 提到的函数，我应该创建一个对象的副本。

$(desk).on('click','#ok-order',function(){
    var copiedObject = jQuery.extend({},activeItem);
    currentOrder.items.push(copiedObject);
    // currentOrder.items[currentOrder.items.length] = activeItem;
    addToOrderedItemsList();

});

Answer 1

这是因为只有一个对象。您永远不会更新“activeItem”以引用新对象。每当您想从一个新项目开始时，您都需要从一个新对象开始：

activeItem = {};

Answer 2

实际上它没有插入最后一个，它每次都插入相同的项目。原因是代码——

var activeItem = {
    itemId : 0,
    itemName: '',
    itemAmount : 0,
    itemPrice : 0
}

你看，这一行创建并初始化了对象activeItem。您在其他任何地方都没有实例化一个新的。因此，每次您修改它时，它都会修改相同的项目并插入相同的项目。要修复，您应该在函数内实例化它。类似的东西 -

<other codes>.....

var itemTemplate = function(){
    this.itemId = 0;
    this.itemName = '';
    this.itemAmount = 0;
    this.itemPrice = 0;
    return this;
};

activeItem = null;

$(desk).on('click', '.items', function(){

    activeItem = new itemTemplate();

    activeItem.itemId = 0;
    activeItem.itemAmount = 0;
    activeItem.itemPrice = 0;
    item.removeClass('selected-item');
    $(this).toggleClass('selected-item');

    activeItem.itemName = $(this).text();
    activeItem.itemId = $(this)[0].dataset.itemid;
    activeItem.itemPrice = $(this)[0].dataset.itemprice;

});

<other codes>....