javascript .push（）每次插入相同的对象 [英] javascript .push() inserts the same object every time

问题描述

我不知道自己在做什么错，但是我无法将对象推到现有对象上。我有盒子，还有计算器，...在单击盒子 .items之后……

I dont know what I am doing wrong, but I cant push object to an existing object. I have boxes, and calculator, ... after click on box ".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 对象-项目数组具有相同的对象，我尝试使用.length，然后简​​单分配..发生相同的问题。
步骤是...单击boxs = items类，单击数字 calc-number类，单击ok按钮 ok-order id ...（随机执行），然后点击订单按钮发送订单 ID。

I create a list with the steps by clicking on the "ok" button ... the unoredered list works fine, ... but after clicking on the "order" button, the currentOrder object - items array have the same objects, I tried to use .length, then simple assign .. the same issue occurs. The steps are ... click on boxes = "items" class, click on number "calc-number" class, click on ok button "ok-order" id ... (do it random times), then click on order button "send-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（）之后没有插入对象，为什么每次都将最后一个对象插入每个数组位置？

Does anybody have idea why does .push() doesnt inserts object each after, and why inserts the last object every time into every array position?

UPDATE：
我按@Pointy所述更新功能，我应该创建对象的副本。

UPDATE: I update the function as mentioned @Pointy , I should create a copy of object.

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

});

推荐答案

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

It's because there is only one object. You never update "activeItem" to reference a new object. Whenever you want to start on a new item, you need to start with a new object:

activeItem = {};

这篇关于javascript .push（）每次插入相同的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！