通過類方法附加HTML內容-有解無憂

我正在嘗試為電子商務型別的網站設計 UI。我在類實體屬性中設定所有資料，然后使用父方法附加 HTML 內容。

我的 getHTML 方法在每個子類的建構式中呼叫，它應該將自己的個性化 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 類檔案：

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> - $49.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 關鍵字的方式有關。任何幫助表示贊賞！

uj5u.com熱心網友回復：

您試圖將 Headphones 中的 setName 和 setPrice 作為全域函式而不是物件屬性呼叫；可以完全跳過它，因為你在 super() 中呼叫它。

下面洗掉了這些行，否則僅修改為跳過代碼段中的匯出/匯入：

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  id="headphones">
            <img  src="images/headphones.jpg" alt="通過類方法附加 HTML 內容">
            <figcaption >Headphones <span> - $49.99</span></figcaption>
            <div >
                <img  src="images/bag-plus.svg" alt="通過類方法附加 HTML 內容"></img>
                <img src="images/bag-x.svg" alt="通過類方法附加 HTML 內容">  
            </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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/432201.html

標籤：javascript html 班级

上一篇：如何在鏈表C 中的函式內傳遞值

下一篇：不能使用C 中尚未定義的類