Проблемы с видимостью в классе?

Question

[artekha]

Как в методе showMenu указать selects, потому что в консоле пишет что переменная не определена?

class DropDown {
  
  constructor(options) {
    
    const selects = options.selects;
    selects.forEach((item, i, selects) => {
      item.addEventListener('mousedown', this.showMenu.bind(this));
    });
    
  }
  
  showMenu(e) {

    e.preventDefault();
    const currentItem = e.target;
    let list = currentItem.closest('.select-wrap').querySelector('.select-list');

    console.log(selects);

    if (list.classList.contains('hide')) {
      selects.forEach((item, i, selects) => {
        item.classList.remove('active');
        item.closest('.select-wrap').querySelector('.select-list').classList.add('hide');
      });

      list.classList.remove('hide');
      currentItem.classList.add('active');
      
    } else {
      
      list.classList.add('hide');
      currentItem.classList.remove('active');
      
    }
  }
  
}

let dropDown = new DropDown({
  selects: document.querySelectorAll('select')
});

Answer 1

[Andrey Dyrkov]

В конструкторе надо прописать что-то типо

constructor(options) {
    
    this.selects = options.selects;
   // some code
    
  }

Тогда в классе будет свойство selects которым можно будет пользоваться всеми методами класса (сделай приватным)

Answer 2

[Алексей Зуев]

class DropDown {
  selects;
  constructor(options) {
    this.selects = options.selects;
    this.selects.forEach((item, i, selects) => {
      item.addEventListener('mousedown', this.showMenu.bind(this));
    });   
  }
  
  showMenu(e) {
    e.preventDefault();
    const currentItem = e.target;
    let list = currentItem.closest('.select-wrap').querySelector('.select-list');

    console.log(this.selects);

    if (list.classList.contains('hide')) {
      this.selects.forEach((item, i, selects) => {
        item.classList.remove('active');
        item.closest('.select-wrap').querySelector('.select-list').classList.add('hide');
      });

      list.classList.remove('hide');
      currentItem.classList.add('active');   
    } else {   
      list.classList.add('hide');
      currentItem.classList.remove('active');   
    }
  }
}

let dropDown = new DropDown({
  selects: document.querySelectorAll('select')
});