javascript - 如何使用 Vanilla JS 创建并显示自定义组件 100 次

Question

亲爱的，

我有一个任务来创建自定义 HTML 组件，将其显示 100 次，向其添加按钮，这将删除它，并且每个第三个组件都应该是可单击的，并在单击时更改颜色。到目前为止我有这个https://codepen.io/GosiaPtak/pen/abOZmyq

class ElementList extends HTMLElement {
  constructor() {
    super();
    let counter = 100;
    const div = '';
    const btn = '';
   }
  connectedCallback() {
    this.div = document.createElement('div');
    this.div.innerHTML = 'i am div';
    this.btn = document.createElement('button');
    this.btn.innerHTML = 'Click me';
    this.div.appendChild(this.btn);
    this.appendChild(this.div); 
  }
}
customElements.define('element-list', ElementList);

但我无法正确放置 while 循环，因此它会显示 100 次。

你能帮我吗，我正在从这里学习:https://javascript.info/custom-elements

亲切的问候，

Answer 1

您正在使用代码定义一个自定义元素，该元素代表对象的一个实例。现在要创建多个此类，只需在类定义之外使用基本的 javascript，如下面的代码所示。

class ElementList extends HTMLElement {
  constructor() {
    super();
    const div = '';
    const btn = '';
   }
  connectedCallback() {
    this.div = document.createElement('div');
    this.div.innerHTML = 'i am div';
    this.btn = document.createElement('button');
    this.btn.innerHTML = 'Click me';
    this.div.appendChild(this.btn);
    this.appendChild(this.div);
  }
}
customElements.define('element-list', ElementList);

for(let i = 0; i <= 100; i++) {
  let item = document.createElement('element-list');
  document.body.appendChild(item);
}

通过这个 for 循环，也许还有一个可以传递给对象的参数，您可以意识到每隔三个应该是可点击的。