Question

我试图将一个项目对象附加到父div中。我选择一个项目，它更新对象，然后对象插入页面。但是，这只会附加到父div并且不会清除并重新插入（或者更好，将最新项插入div）。

所以，让我说我的页面上有这个列表：

var selectedItemQueue = [
   {
      "market_hash_name":"Chroma 2 Case Key 1",
      "assetid":"92700754417_143965972",
      "amount":1,
      "image":"https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXX7gNTPcUxuxpJSXPbQv2S1MDeXkh6LBBOie3rKFRh16PKd2pDvozixtSOwaP2ar7SlzIA6sEo2rHCpdyhjAGxr0A6MHezetG0RZXdTA/"
   },
   {
      "market_hash_name":"Chroma 2 Case Key 2",
      "assetid":"92700754667_143865972",
      "amount":1,
      "image":"https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXX7gNTPcUxuxpJSXPbQv2S1MDeXkh6LBBOie3rKFRh16PKd2pDvozixtSOwaP2ar7SlzIA6sEo2rHCpdyhjAGxr0A6MHezetG0RZXdTA/"
   },
   {
      "market_hash_name":"Shadow Case Key 3",
      "assetid":"1293611210722_143865972",
      "amount": 2,
      "image":"https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXX7gNTPcUxuxpJSXPbQv2S1MDeXkh6LBBOiePrKF4wi6aaIGwStN_jl4bSzvXwMO6AwDlSvsYoiOiZ8dij3QbtqkU9ZnezetFWWxusZg/"
   }
];

我选择了一个新项目，该项目附加到selectedItemQueue对象。

var selectedItemQueue = [
   {
      "market_hash_name":"Chroma 2 Case Key 1",
      "assetid":"92700754417_143965972",
      "amount":1,
      "image":"https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXX7gNTPcUxuxpJSXPbQv2S1MDeXkh6LBBOie3rKFRh16PKd2pDvozixtSOwaP2ar7SlzIA6sEo2rHCpdyhjAGxr0A6MHezetG0RZXdTA/"
   },
   {
      "market_hash_name":"Chroma 2 Case Key 2",
      "assetid":"92700754667_143865972",
      "amount":1,
      "image":"https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXX7gNTPcUxuxpJSXPbQv2S1MDeXkh6LBBOie3rKFRh16PKd2pDvozixtSOwaP2ar7SlzIA6sEo2rHCpdyhjAGxr0A6MHezetG0RZXdTA/"
   },
   {
      "market_hash_name":"Shadow Case Key 3",
      "assetid":"1293611210722_143865972",
      "amount": 2,
      "image":"https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXX7gNTPcUxuxpJSXPbQv2S1MDeXkh6LBBOiePrKF4wi6aaIGwStN_jl4bSzvXwMO6AwDlSvsYoiOiZ8dij3QbtqkU9ZnezetFWWxusZg/"
   },
   {
      "market_hash_name":"Shadow Case Key 4",
      "assetid":"123393510722_143861972",
      "amount":1,
      "image":"https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXX7gNTPcUxuxpJSXPbQv2S1MDeXkh6LBBOiePrKF4wi6aaIGwStN_jl4bSzvXwMO6AwDlSvsYoiOiZ8dij3QbtqkU9ZnezetFWWxusZg/"
   }
];

这是几乎处理整个应用程序的代码：

// inserts items to page

function insertInventoryList(inventory, elem) {
    var elem = $(elem);
    for (var i = inventory.length - 1; i >= 0; i--) {
        var itemElem = itemTemplate(inventory[i].market_hash_name, inventory[i].assetid, inventory[i].image, inventory[i].amount);
        elem.append(itemElem);
    };
}

function itemTemplate(marketName, assetId, itemImage, itemAmount) {
    var template = 
        '<div class="inventory-item" title="' + marketName + '" data-item-id="' + assetId + '" data-amount="' + itemAmount + '">' +
            '<img class="inventory-item-image" src="' + itemImage + '" alt="' + marketName + '" width="95px" height="95px"> ' + 
        '</div>';
    return template;
}

function addItemToSelectedQueue(assetId){
    var itemObj = findItemById(assetId);
    var queueHasItem = false;
    for (var i = 0;  i < selectedItemQueue.length; i++) {
        if (selectedItemQueue[i].assetid === itemObj.assetid) {
            queueHasItem    = true;
            if (itemObj.amount > 1) {
                selectedItemQueue[i].amount++;
                console.log(inventory.assetid[itemObj.assetId].marketName);
            }
        }
    };
    if (!queueHasItem) {
        selectedItemQueue.push(itemObj);
        updateSelecteditems();
    } 
}

function updateSelecteditems() {
    insertInventoryList(selectedItemQueue, '#selected-items');
}

现在这段代码只是附加到页面上，但正确地添加了变量。

现在，还有一件事我想弄明白可以解决我的问题。每个子对象都有这个键：

 "amount":1

值可能会发生变化，我想更新selectedItemQueue中的此值以及item元素的data-amount属性。我认为这与解决我的问题有关，但我不确定如何解决这个问题。有什么建议吗？

感谢。

为了澄清，我试图将一个项目列表插入到父元素中，该列表来自一个对象，但是当将新项目附加到该对象时，它也会附加到div，而不是仅仅插入新项目。

Answer 1

＆＃13;

function updateSelecteditems() {
    $('#selected-items').empty();
    insertInventoryList(selectedItemQueue, '#selected-items');
}

＆＃13;

试试这个，它首先清空DOM，然后重新添加每个DOM。

但是我会注意到，当您将演示文稿和数据层混合在一起时，您的代码将很快变得难以管理。

如果我是你，我会尝试将这些问题分开。只是我的2美分...如果它只是让它快速工作的问题，那么代码我的兄弟！：）

停止重复插入的项目

1 个答案: