• Теория
  • Теория

Проверяем свойство isAvailable

Цикл работает и корректно перебирает коллекцию DOM-элементов. Займёмся реализацией программы.

Будем считать, что массив с данными о товарах и псевдомассив с DOM-элементами всегда имеют одинаковую длину, это позволит перебирать две структуры в одном цикле. Заведём переменную product, которая будет соответствовать текущему товару. Тогда текущий DOM-элемент (мы уже сохраняем его в переменную element) и текущий товар будут совпадать друг с другом.

Чтобы отобразить статус наличия товара, надо добавлять DOM-элементу разные классы. Сделаем это в несколько шагов:

  • Создадим переменную для хранения класса, связанного с наличием. По умолчанию считаем, что товар в наличии, поэтому исходное значение у переменной будет product--available.
  • Добавим проверку свойства isAvailable у товара. Если оно равно false (товар не в наличии), изменим значение переменной на product--unavailable.
  • С помощью classList.add() добавим DOM-элементу класс, хранящийся в переменной.

Из части «Условия» вы знаете, что булевы значения сами могут выступать в качестве условий. Поэтому наша проверка могла бы выглядеть примерно так:

var value = true;

if (value) {
  // Код выполнится
}

Только в нашем случае проверка должна сработать, если значение свойства isAvailable равно false. Поэтому нужна проверка с отрицанием:

var value = false;

if (!value) {
  // Код выполнится
}
Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «JavaScript в браузере» тренажёра «Погружение в браузерный JavaScript» можно после регистрации и оформления подписки.