文章/答案/技术大牛

发布

社区首页 >问答首页 >通过类方法追加HTML内容

问通过类方法追加HTML内容
EN

Stack Overflow用户

提问于 2022-02-24 20:51:36

回答 1查看 136关注 0票数 -2

我正试图为一个电子商务类型的网站设计一个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关键字的方式有关。任何帮助都是非常感谢的！

javascript

html

class

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-02-24 21:13:22

您试图在耳机中调用setName和setPrice作为全局函数，而不是object属性；可以跳过这一点，因为您是在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 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>
        `;
  }
}


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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71258110

复制

相似问题

问通过类方法追加HTML内容
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过类方法追加HTML内容EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过类方法追加HTML内容
EN