Добавить сразу несколько классов элементу (список классов передается аргументом, наряду с другими аргументами)

Question

Добавить сразу несколько классов элементу (список классов передается аргументом, наряду с другими аргументами)

Рейтинг: 0Ответов: 3Опубликовано: 08.03.2023

Например есть функция конструктор которая принимает три параметра : ай-ди, список классов, какой-то текст

function Modal (id, classes, text) {
this.id = id;
this.classes = classes;
this.text = text;

this.render = function() {
    this.modWind = document.createElement("div");
    this.modWind.id = this.id;
    this.modWind.classList.add(this.classes);
    return this.modWind;
}
}

const modal = new Modal(“anyID”, [“class1”, “class2”, “class3”], “modal window text”);
root.append(modal.render())

Сейчас получается так class=“class1,class2,class3” а должно же быть так class=“class1 class2 class3” верно ?

Как правильно принять или передать несколько классов ?

javascript объекты конструктор

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Использовать rest оператор. Синтаксис остаточных параметров функции позволяет представлять неограниченное множество аргументов в виде массива. Тут стоит учесть что тут классы передаются последним аргументом, и всё что будет передано, попадет в этот массив. Так что следует передавать желаемые классы последними. Тут мы получаем массив classes со всеми переданными в него классами, перебираем его так как это массив, и каждый элемент внутри добавляем с помощью метода add объекта classList.

function Modal(id, text, ...classes) {
  this.id = id;
  this.classes = classes;
  this.text = text;

  this.render = function () {
    this.classes.forEach((classes) => {
      this.modWind.classList.add(classes);
    });
    this.modWind = document.createElement('div');
    this.modWind.id = this.id;
    return this.modWind;
  };
}

const modal = new Modal(
  'anyID',
  'modal window text',
  'class1',
  'class2',
  'class3'
);

root.append(modal.render());

Так же предлагаю вам посмотреть вот такой вот синтаксис создания классов.

class Modal {
  constructor(id, text, ...classes) {
    this.id = id;
    this.classes = classes;
    this.text = text;
    this.render();
  }

  render() {
    const modWind = document.createElement('div');
    modWind.setAttribute('id', this.id);

    this.classes.forEach((classes) => {
      modWind.classList.add(classes);
    });

    root.append(modWind);
  }
}

new Modal('anyID', 'modal window text', 'class1', 'class2', 'class3');

Внутри метода render, мы выполняем нужные нам действия и уже "аппендим" его в нужный нам элемент. Так же обратите внимание что внутри конструктора уже вызван метод рендер, так что он будет вызван в момент создания экземпляра, не нужно будет дополнительно его вызывать, тут на свой вкус и цвет. Так же обратите внимание что если вы один раз хотите выполнить эту операцию и забыть о ней без создания дополнительных переменных можно вызвать его как на примере в последней строке.

Answer 2

▲ 1

все выше изложенные способы работают, самым удобным в моем случае показалост передавать как массив [“class1”, “class2”] а получать с помошью спред this.modWind.classList.add(...this.classes);

Answer 3

▲ 0

В classList можно передать несколько значение с помощью .apply либо spread оператора

first.classList.add(...['solid', 'red-bg', 'border-green']);
second.classList.add.apply(second.classList, ['dashed', 'green-bg', 'border-red']);

.solid {
  border: 3px solid;
}

.dashed {
  border: 3px dashed;
}

.red-bg {
  background-color: red;
}

.green-bg {
  background-color: green;
}

.border-red {
  border-color: red;
}

.border-green {
  border-color: green;
}

div {
  padding: 10px;
  margin-bottom: 10px;
}

<div id="first">1</div>
<div id="second">2</div>

Добавить сразу несколько классов элементу (список классов передается аргументом, наряду с другими аргументами)

Ответы