Как лучше инициализировать класс по классу в HTML?

Question

[lavezzi1]

Здравствуйте. Написал простой компонент выпадалки, структура такая:

class Dropdown {
   constructor(props) {}
  
  init() {}
  
  toggle() {}
  
  show() {}
  
  hide() { }
}

Потом прокидываю туда кнопку и саму выпадалку и все работает. Есть потребность в том, чтобы просто подключить потом скрипт к html, добавить разметку и класс например .js-dropdown и чтобы это все работало. Получается мне нужно будет сделать обертку в которой будет loop на onload и к каждому элементу с классом .js-dropdown будет инициализироватся класс Dropdown. Или есть лучше решения? Нужно сделать то как делает это jquery

Answer 1

[Николай]

Обычно вызывается функция, которая находит все элементы с нужным классом, а затем создается MutationObserver с коллбэком в виде той же функции.

Comments

[Николай]

Значение атрибута - строка. Нужно приводить к нужному типу, чтобы работало if(this.isClosable)

[lavezzi1]

Николай: Спасибо! А можете пример кинуть использования MutationObserver в моем случае?

[Николай]

Там по ссылке же есть пример.

Answer 2

[kulaeff]

Все верно. Если вы хотите, чтобы ваш класс применялся ко всем элементам с классом .js-dropdown, то нужно делать как-то так:

$(document).ready(function() {
    $('.js-dropdown').each(function() {
      new Dropdown($(this));
    });
});