通过 class 方法追加 HTML 内容

Question

我正在尝试为电子商务类型的网站设计 UI。我在 class 实例属性中设置所有数据，然后使用父方法附加 HTML 内容。

我的getHTML方法在每个子class的构造函数中被调用，它应该将自己个性化的HTML内容写到document.querySelector('.products ') 作为“根”传递。

然而，该函数实际上并没有做任何事情。

HTML:

</head>
    <body>
        <header>
            <h2>E-Commerce Shopping Cart</h2>
        </header>

        <img id="cart" src="images/cart.svg" alt="Shopping Cart">
        
        <div class="products">

        </div>

        <script src="script.js" type="module"></script>
    </body>

JS classes 文件：

export default class Product {
    constructor(name, price) {

        //Instance properties
        this.name= name;
        this.price= price;
        this.inCart= false;
        this.cartQuantity = 0;
    }
    productInfo(name, price){
        return `${this.name} ${this.price}`;
    }

    setName(name){
        this.name = name;
    }

    setPrice(price){
        this.price = '$' + price;
    }

    isInCart(bool){
        if(bool === true){
            this.inCart = true;
        } else this.inCart = false; 
    }

    static getHTML(){
        return ``;
    }
}

export class Headphones extends Product{
    constructor(name, price, root){
        super(name, price);
        this.name= setName;
        this.price= setPrice;

        root.innerHTML = Headphones.getHTML();
        
    }

    
    static getHTML() {
        return super.getHTML() + 
        `
        <figure class="product-grid" id="headphones">
            <img class="product-img" src="images/headphones.jpg" alt="Headphones">
            <figcaption class="product-caption">Headphones <span> - .99</span></figcaption>
            <div class="controls">
                <img class="cart-add" src="images/bag-plus.svg" alt="Add to Cart"></img>
                <img class="cart-remove"src="images/bag-x.svg" alt="Remove from Cart">  
            </div>
        </figure>
        `;
    }
}

JS脚本文件：

import Product from "./classes.js";
import Headphones from "./classes.js";

const product = new Product(
    "Generic Product", 10.00
);

const headphones = new Headphones(
    "Headphones", 49.99, document.querySelector(".products")
);

我很确定我的问题与我调用 getHTML 函数的方式有关，或者与我在其定义中使用 super 关键字的方式有关。感谢您的帮助！

Answer 1

您试图在耳机中调用 setName 和 setPrice 作为全局函数而不是对象属性；可以完全跳过它，因为你在 super() 中调用它。

下面删除了那些行，否则只修改为跳过代码段中的 export/import：

class Product {
  constructor(name, price) {

    //Instance properties
    this.name = name;
    this.price = price;
    this.inCart = false;
    this.cartQuantity = 0;
  }
  productInfo(name, price) {
    return `${this.name} ${this.price}`;
  }

  setName(name) {
    this.name = name;
  }

  setPrice(price) {
    this.price = '$' + price;
  }

  isInCart(bool) {
    if (bool === true) {
      this.inCart = true;
    } else this.inCart = false;
  }

  static getHTML() {
    return ``;
  }
}

class Headphones extends Product {
  constructor(name, price, root) {
    super(name, price);
    root.innerHTML = Headphones.getHTML();
  }


  static getHTML() {
    return super.getHTML() +
      `
        <figure class="product-grid" id="headphones">
            <img class="product-img" src="images/headphones.jpg" alt="Headphones">
            <figcaption class="product-caption">Headphones <span> - .99</span></figcaption>
            <div class="controls">
                <img class="cart-add" src="images/bag-plus.svg" alt="Add to Cart"></img>
                <img class="cart-remove"src="images/bag-x.svg" alt="Remove from Cart">  
            </div>
        </figure>
        `;
  }
}


const product = new Product(
  "Generic Product", 10.00
);

const headphones = new Headphones(
  "Headphones", 49.99, document.querySelector(".products")
);

</head>

<body>
  <header>
    <h2>E-Commerce Shopping Cart</h2>
  </header>

  <img id="cart" src="images/cart.svg" alt="Shopping Cart">

  <div class="products">

  </div>

  <script src="script.js" type="module"></script>
</body>

通过 class 方法追加 HTML 内容

Append HTML content through class methods

html

javascript

class