时间戳

首页 > 解决方案 > 如何使用 Vanilla JS 创建和显示自定义组件 100 次

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

问题描述

亲爱的，

我的任务是创建自定义 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

亲切的问候，

标签： javascriptcustom-componenthtml-components

解决方案

您正在使用您的代码定义一个自定义元素，该元素代表该对象的一个​​实例。现在要创建其中的多个，只需使用类定义之外的基本 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 循环，也许还有一个可以传递给对象的参数，你可以意识到每三分之一应该是可点击的。

推荐阅读