javascript - 当指定仅删除一次时，拼接将从数组中删除多个项目

Question

我创建了一个模型购物篮，添加的数量很好，但删除却无法正常工作。我已在删除方法中指定在该位置进行拼接并仅从数组中删除 1 个条目，但似乎将它们全部删除。

重现错误

添加 3 x 瑞典人添加 3 x 欧洲防风草

移除 1 个瑞典人

您可以在此处通过在线 IDE 查看代码 https://codio.com/adam91holt/305CDE-Challenge-3

这是完整的 JS 代码 - 删除函数位于底部

var shop = (function() {
    var items = [];
    var basketItems = [];
    var count = 0;
    return {
        //Constructor to create the item
        addItem: function(title, description, price) {
            this.title = title;
            this.description = description;
            this.price = price;
            this.id = count;
            this.remove = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
            this.quantity = title
            this.html = '<tr><td>' + this.title + '</td><td>' + this.description + '</td><td>' + this.price + '</td><td><button id="' + this.id + '">Add To Basket</button></td><tr>';
            this.inBasket = '<tr id="' + this.remove + '"><td>' + this.title + '</td><td>' + this.price + '</td><td><div id="' + this.quantity + '">1</div>' + '</td><td><button id="' + this.remove + '"> Remove </button><tr>';
            items.push(this);
            count++;
        },
        //Sends new items to constructor
        createItems: function() {
            new this.addItem('Carrott', 'Lovely orange vegetable!', parseFloat(0.50).toFixed(2));
            new this.addItem('Potato', 'Fresh baking potato.', parseFloat(0.75).toFixed(2));
            new this.addItem('Brocolli', 'Green trees!', parseFloat(0.49).toFixed(2));
            new this.addItem('Parsnip', 'Sweet tasting.', parseFloat(0.60).toFixed(2));
            new this.addItem('Swede', 'Tasty fresh Swede.', parseFloat(1.00).toFixed(2));
            console.log(items);
            this.printHtml()
        },
        //Add's the html to the table from the item object
        printHtml: function() {
            var table = document.getElementById("output")
            items.forEach(function(item) {
                table.innerHTML += item.html;
            })
            this.listenerAdd()
        },
        //Creates a listener for adding to the basket
        listenerAdd: function() {
            items.forEach(function(item) {
                document.getElementById(item.id).addEventListener("click", function() {
                    shop.addToBasket(item)
                });
            });
        },
        //Creates a listener for removing from the basket
        listenerRemove: function() {
            basketItems.forEach(function(item) {
                document.getElementById(item.remove).addEventListener("click", function() {
                    shop.remove(item)
                });
            });
        },
        //Add's the item once the event listener has been triggered
        addToBasket: function(item) {
            basketItems.push(item);
            this.total();
            var basket = document.getElementById("basketitems");
            var quantity = document.getElementById(item.quantity);
            var howMany = this.checkQuantity(item);
            if(howMany <= 1) {
                basket.innerHTML += item.inBasket;
                this.listenerRemove();
            } else {
                quantity.innerHTML = howMany;
            }
        },
        //Checks basket to see if it is already there
        checkQuantity: function(item) {
            var searchTerm = item.title;
            var howMany = 0;
            for(var i = 0; basketItems.length > i; i++) {
                if(basketItems[i].title === searchTerm) {
                    howMany++
                }
            }
            return howMany;
        },
        //Calculates the running total
        total: function() {
            var total = 0
            basketItems.forEach(function(items) {
                var price = items.price;
                total = total + parseFloat(price);
            })
            var totalHTML = document.getElementById("total");
            totalHTML.innerHTML = '<b>Total = ' + parseFloat(total).toFixed(2) + '</b>';
        },
        //Allows you to remove items from the basket
        remove: function(item) {
            var where = basketItems.indexOf(item);
            var quantity = document.getElementById(item.quantity);
            basketItems.splice(where, 1);
            this.total()
            var howMany = this.checkQuantity(item);
            if(howMany === 0) {
                console.log(item.remove)
                var row = document.getElementById(item.remove);
                row.parentNode.removeChild(row);
            } else {
                quantity.innerHTML = howMany;
            }
        }
    }
})();

function init() {
    'use strict';
    shop.createItems()
};
//On window load call init function
window.onload = init;

Answer 1

因此，在名为“listenerRemove”的事件监听器中，如果数量为 5，则为每个事件执行一次，这基本上会导致将相同的事件注册到相同的点击 5 次。解决方案是仅为新项目注册事件，因此第一个更改是 get使用 document.createElemenet 将项目添加到表中

像这样:

var tr = document.createElement('tr');

给它你的随机 ID

tr.id = item.remove;

附加 item.inBasket 中的文本

tr.innerHTML = item.inBasket;

如果是新项目，现在将其附加到表中

basket.appendChild(tr);

注册事件

this.listenerRemove(item);

在事件注册中进行单个注册而不是 foreach

listenerRemove: function(item) {        

document.getElementById(item.remove).addEventListener("click", function() {
                shop.remove(item)
            });
    },

其余见 fiddle http://jsfiddle.net/guqno66d/