javascript - 动态更改 HTML 元素

问题描述

我有一个侧抽屉，我在其中显示用户选择的当前购物车产品。最初，我有一个<p>标签说购物车是空的。但是，如果购物车里面有物品，我想删除它。我正在使用 OOP 方法来设计此页面。请参阅下面我正在使用的课程。

我尝试使用 if 语句来调节<p>标签，但这似乎是错误的方法。任何人都有更好的方法来做到这一点。请参阅 UI 中的购物车屏幕截图和以下代码：

class SideCartDrawer {
    cartProducts = [];

    constructor() {
        this.productInCartEl = document.getElementById('item-cart-template');
    }

    addToCart(product) {
        const updatedProducts = [...this.cartProducts];
        updatedProducts.push(product);
        this.cartProducts = updatedProducts;
        this.renderCart();
    }

    renderCart() {
        const cartListHook = document.getElementById('cart-items-list');
        let cartEl = null;
        if (this.cartProducts.length === 0) {
            cartEl = '<h2>You Cart is Empty</h2>';
        } else {
            const productInCartElTemplate = document.importNode(
                this.productInCartEl.content,
                true
            );
            cartEl = productInCartElTemplate.querySelector('.cart-item');
            for (let productInCart of this.cartProducts) {
                cartEl.querySelector('h3').textContent = productInCart.productName;
                cartEl.querySelector('p').textContent = `£ ${productInCart.price}`;
                cartEl.querySelector('span').textContent = 1;
            }
        }
        cartListHook.append(cartEl);
    }
}

顺便说一句，<p>如果购物车清空，应该会重新出现 :) ！

标签： javascripthtml

根据您的代码设置方式，您可能希望在每次渲染时重置列表。你会通过完全清除来做到这一点#cart-items-list。这是this question的删除方法

while (cartListHook.firstChild) {
  cartListHook.removeChild(cartListHook.lastChild);
}

但是您可以使用任何方法来删除 HTML 节点的子节点。重申一下，您将在通过其 id 获取元素之后将其放置。

PS 你可能想在你的 for 循环中添加更多代码，因为它似乎只会创建 cart-item 元素，即使this.cartProducts.

javascript - 动态更改 HTML 元素

问题描述

解决方案

推荐阅读