Вернуться к уроку

Добавить класс в строку

важность: 5

В объекте есть свойство className, которое содержит список «классов» – слов, разделенных пробелом:

var obj = {
  className: 'open menu'
}

Создайте функцию addClass(obj, cls), которая добавляет в список класс cls, но только если его там еще нет:

addClass(obj, 'new'); // obj.className='open menu new'
addClass(obj, 'open'); // без изменений (класс уже существует)
addClass(obj, 'me'); // obj.className='open menu new me'

alert( obj.className ); // "open menu new me"

P.S. Ваша функция не должна добавлять лишних пробелов.

Открыть песочницу с тестами для задачи.

Решение заключается в превращении obj.className в массив при помощи split. После этого в нем можно проверить наличие класса, и если нет – добавить.

function addClass(obj, cls) {
  var classes = obj.className ? obj.className.split(' ') : [];

  for (var i = 0; i < classes.length; i++) {
    if (classes[i] == cls) return; // класс уже есть
  }

  classes.push(cls); // добавить

  obj.className = classes.join(' '); // и обновить свойство
}

var obj = {
  className: 'open menu'
};

addClass(obj, 'new');
addClass(obj, 'open');
addClass(obj, 'me');
alert(obj.className) // open menu new me

P.S. «Альтернативный» подход к проверке наличия класса вызовом obj.className.indexOf(cls) был бы неверным. В частности, он найдёт cls = "menu" в строке классов obj.className = "open mymenu".

P.P.S. Проверьте, нет ли в вашем решении присвоения obj.className += " " + cls. Не добавляет ли оно лишний пробел в случае, если изначально obj.className = ""?

Открыть решение с тестами в песочнице.