javascript - 在向 DOM 添加新元素后，如何使事件过滤器按价格排序？

Question

当您点击<th> Price: </ th>时，商品按价格排序，方法:sortProductsByPrice (sortOrder)按照增加的顺序。排序可以工作，但是需要在激活排序后，即点击<th> Price: </ th> ，则新商品已添加，按价格排序，不再点击<th> Price: </ th>对它们进行分类。

我正在尝试在方法中执行此操作:addProduct(newProduct)我尝试像这样实现它:

  //method for adding a product
addProduct(newProduct) {
    if (this.sortProductsByPrice === true) {
        this.products.push(newProduct);
        this.sortProductsByPrice(Product.SORT_ORDER_ASC);
    }else  {
        this.products.push(newProduct);
    }
}

但是代码并不像我上面描述的那样工作

 class Product {
    constructor(name, count, price) {
        this.name = name;
        this.count = count;
        this.price = price;
    }
}
// Сlass where products are recorded
 class Shop {
    constructor() {
        this.products = [];
        this.formAdd = document.forms[0];
        this.inputsAdd = this.formAdd.elements;
        this.buttAdd = this.formAdd.elements[3];
        this.formDelete = document.forms[1];
        this.nameDelete = this.formDelete.elements[0];
        this.buttDelete = this.formDelete.elements[1];

    }

    //method for adding a product
    addProduct(newProduct) {
        if (this.sortProductsByPrice === true) {
            this.products.push(newProduct);
            this.sortProductsByPrice(Product.SORT_ORDER_ASC);
        }else  {
            this.products.push(newProduct);
        }
    }

    //method for remove product by name
    deleteProductByName(productName) {
        let i = this.products.length;
        while (i--) {
            if (productName === this.products[i].name) {
                this.products.splice(i, 1);
            }
        }
    }

    //method for sorting the product at its price
    sortProductsByPrice(sortOrder) {
        const sorted = this.products.sort((a, b) => {
            return a.price > b.price ? sortOrder : -sortOrder;
        });
        this.products = sorted;
    }

    // method to draw the table with product property (
    // name, count, price)
    show() {

        const rows = document.querySelectorAll("#shop .data");
        for (let i = rows.length - 1; i >= 0; i--) {
            const e = rows.item(i);
            e.parentNode.removeChild(e);
        }
        const table = document.getElementById("shop");
        const tFoot = table.querySelector('tfoot');
        if (tFoot) tFoot.remove();

        for (let i = 0; i < this.products.length; i++) {
            //create table
            table.innerHTML += `<tbody><tr class="data"><td>${this.products[i].name}</td>
    <td>${this.products[i].price}</td>
    <td>${this.products[i].count}</td></tr></tbody>`;
        }
    }

    OperationsWithProducts() {
        // add new product by click
        this.buttAdd.addEventListener('click', (e) => {
            e.preventDefault();
            if (this.inputsAdd[0].value === "" || this.inputsAdd[1].value === "" || this.inputsAdd[2].value === "") {
                alert("fill all fields");
            } else {
                this.addProduct(new Product(this.inputsAdd[0].value, parseInt(this.inputsAdd[2].value),
                    parseInt(this.inputsAdd[1].value)));
                this.show();
                this.inputsAdd[0].value = "";
                this.inputsAdd[1].value = "";
                this.inputsAdd[2].value = "";
            }
        }, false);
        // delete product by name after click
        this.buttDelete.addEventListener('click', (e) => {
            e.preventDefault();
            if (this.nameDelete.value === "") {
                alert("write a name of product what you want to delete");
            } else {
                this.deleteProductByName(this.nameDelete.value);
                this.show();
                this.nameDelete.value = "";
            }

        }, false);
        //filter products by price
        document.addEventListener("click", (e) => {
            let elem = e.target;
            if (elem.id === "filter") {
                this.sortProductsByPrice(Product.SORT_ORDER_ASC);
                this.show();
            }
        }, false);
        console.log(this.products);
    }
}

Product.SORT_ORDER_ASC = 1;
let shop = new Shop();
shop.addProduct(new Product("product", 1, 2000));
shop.addProduct(new Product("product1", 2, 500));
shop.addProduct(new Product("product2", 3, 1000));
shop.show();
shop.OperationsWithProducts();

<div class="Shop">
    <div class="add-product">
        <h1>Add product</h1>
        <form id="addForm">
            <label for="name" >Name of product</label>
            <input type="text"  id="name" class="input-product">
            <label for="price">Price of product</label>
            <input type="number"  id="price" class="input-product">
            <label for="count">Count of product</label>
            <input type="number"  id="count" class="input-product">
            <button id="add" type="button">Add</button>
        </form>
    </div>
    <div class="product-table">
        <h2>Products</h2>
        <form id="delete-form">
            <label for="name-delete">Delete product by name</label>
            <input type="text" id="name-delete" class="input-delete">
            <button id="delete" type="button">Delete</button>
        </form>
        <table id="shop">
            <tr>
                <th>Name:</th>
                <th id="filter">Price:</th>
                <th>Count:</th>
            </tr>
        </table>
    </div>
</div>

Answer 1

问题在于您的相等性检查: if (this.sortProductsByPrice === true) { 这个 if 语句永远不会解析为 true，因为 this.sortProductsByPrice 不是 bool 值。

我能够通过在构造函数内的实例上添加一个新变量来使代码正常工作:this.sortByPrice = false;，在if (elem)中将其设置为 true .id === "filter") this.sortByPrice = true; (因为一旦点击价格，后续添加的产品应该自动排序，如果我理解你的问题正确的话)和将 if (this.sortProductsByPrice === true) { 语句更改为 if (this.sortByPrice === true) {