如何访问使用模板文字创建的类？

Question

这是我的代码：

displayOneCam(getDetail){
  // let lenses = await this.numberOfLenses();
  let html = "";
  let cardHtml =
    `
      <div class="card">
        <img src="${getDetail.imageUrl}" alt="camera1">
          <h2>${getDetail.name}</h2>
          <p>${getDetail.price/100}$</p>
          <p>${getDetail.description}</p>
          <label for="lenses">Lenses</label>
          <input list="lenses">
            <datalist id="lenses">

            </datalist>
          </input>
          <a href="cart.html" class="linkCart btn btn-primary">Add To Cart</a>
      </div>`;


  html+= cardHtml;
  const products = document.querySelector(this.productClass);
  products.innerHTML = html;

}

在另一种方法中，我想得到元素类“卡”。

我这样做了，但它不起作用，当我尝试在控制台中记录结果时，它返回null，谢谢您的帮助:)

setStorage(){
       var info = document.querySelector(".card");
       console.log(info);
}

Answer 1

另一种方法

不知道你的班级结构是什么。但下面的方法有效。只要在尝试访问元素之前调用displayOneCam()方法，它就能工作。

​

class Class_55030705 {
  constructor(pClass) {
    this.productClass = pClass;
  }
  displayOneCam(getDetail) {
    // let lenses = await this.numberOfLenses();
    let html = "";
    let cardHtml =
      `
      <div class="card">
        <img src="${getDetail.imageUrl}" alt="camera1">
          <h2>${getDetail.name}</h2>
          <p>${getDetail.price/100}$</p>
          <p>${getDetail.description}</p>
          <label for="lenses">Lenses</label>
          <input list="lenses">
            <datalist id="lenses">

            </datalist>
          </input>
          <a href="cart.html" class="linkCart btn btn-primary">Add To Cart</a>
      </div>`;


    html += cardHtml;
    const products = document.querySelector(this.productClass);
    products.innerHTML = html;

    return this; //This has only been added to allow chaining.
  }

  setStorage() {
    document.querySelector(".card").style.border = '1px solid red';
  }
}

const class_55030705 = new Class_55030705('.target-container');

class_55030705.displayOneCam({
  imageUrl: 'https://picsum.photos/200/300?image=100',
  name: 'Name',
  price: 50,
  description: "Description here."
}).setStorage();

<div class="target-container"></div>

​