如何使用 Vanilla JS 创建和显示自定义组件 100 次答案

【问题标题】：How to create and display custom component 100 times using Vanilla JS如何使用 Vanilla JS 创建和显示自定义组件 100 次
【发布时间】：2020-06-03 14:13:07
【问题描述】：

亲爱的，

我的任务是创建自定义 HTML 组件，显示 100 次，向其中添加按钮，这将删除它，并且每个第 3 个组件都应该是可点击的并在点击时改变颜色。到目前为止，我有这个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

亲切的问候，

【问题讨论】：

标签： javascript custom-component html-components

【解决方案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 循环，也许还有一个参数，你可以传递给你的对象，你可以实现每三分之一应该是可点击的。

【讨论】：

附注，如果您想创建带有参数的对象，您可以将 for 循环中的第一行更改为：let item = new ElementList();