Question

我不知道我做错了什么，但我不能把对象推到现有的对象上。我有盒子和计算器，...点击框＆＃34; .items＆＃34;

...
<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>

我通过点击＆＃34; ok＆＃34;创建一个包含步骤的列表。按钮...无法恢复的列表工作正常，...但是点击了＆＃34;命令＆＃34;按钮，currentOrder对象 - items数组具有相同的对象，我尝试使用.length，然后简单分配..同样的问题发生。步骤是......点击框=＆＃34;项目＆＃34;上课，点击数字＆＃34; calc-number＆＃34;上课，点击确定按钮＆＃34; ok-order＆＃34; id ...（随机抽取时间），然后点击订单按钮＆＃34; send-order＆＃34;标识。

$(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>....

javascript .push（）每次都插入相同的对象

2 个答案: