Как создать и отобразить пользовательский компонент 100 раз, используя Vanilla JS - PullRequest
Новая
       45

Как создать и отобразить пользовательский компонент 100 раз, используя Vanilla JS

0 голосов
/ 19 февраля 2020

Уважаемые,

У меня есть задача создать пользовательский компонент 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);

, но я не могу правильно разместить время l oop, поэтому он будет отображаться 100 раз.

Не могли бы вы помочь мне, я узнаю это здесь: https://javascript.info/custom-elements

С уважением,

1 Ответ

2 голосов
/ 19 февраля 2020

Вы определяете пользовательский элемент с помощью своего кода, который представляет один экземпляр объекта. Чтобы создать несколько из них, просто используйте basi c 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);
}

С этим для l oop и, возможно, параметром, который вы могли бы передать к своему объекту вы можете понять, что каждый третий должен быть кликабельным.

...