1

Делаю форму онлайн записи. Мне нужно сравнить доступное время с занятым временем из базы. Вот так выглядит все доступное время:

<div class="xdsoft_time_variant">
  <div class="xdsoft_time " data-hour="9" data-minute="0">09:00</div>
  <div class="xdsoft_time " data-hour="10" data-minute="0">10:00</div>
  <div class="xdsoft_time " data-hour="11" data-minute="0">11:00</div>
  <div class="xdsoft_time " data-hour="12" data-minute="0">12:00</div>
</div>

Значение из базы:

bookingTime = '9:00', '12:00';

Как правильно написать условие, если время добавляется класс к xdsoft_time, если нет ничего не происходит?

Понимаю, что сравнивать между собой нужно два массива, скорее всего через forEach, но как это сделать нужно не понимаю. Буду очень благодарен за помощь.

1 ответ 1

2

Как вариант проверить наличие каждого элемента одного массива во втором массиве.

arr1.includes(arr2[i]); // return true or false

Если я правильно понял смысл задачи, то примерно так получается:

const elements = document.querySelector('.xdsoft_time_variant').querySelectorAll('div'); // Сюда складываем все дивы
const bookingTime = ['09:00', '12:00']; // Получаем зарезервированное время с бэка

elements.forEach(element => { // Перебираем наши divы
  if (bookingTime.includes(element.innerText)) { // Если время из divа есть в массиве полученном с бэка добавляем ему класс
    element.classList.add('xdsoft_time');
    nextAndPrevElements(element, 3); // Добавляем такой же класс для предыдущих и следующих трех элементов
  }
});

function nextAndPrevElements(currentElement, value) {
  let nextElement = currentElement.nextElementSibling;
  let prevElement = currentElement.previousElementSibling;

  for (let i = 0; i < value; i++) {
    if (nextElement) {
      nextElement.classList.add('xdsoft_time');
      nextElement = nextElement.nextElementSibling;
    }
    if (prevElement) {
      prevElement.classList.add('xdsoft_time');
      prevElement = prevElement.previousElementSibling;
    }
  }
}
7
  • Не со всем понял, как реализовать, могли бы расписать?
    – icode
    2 авг 2022 в 17:13
  • Добавил пример в ответ.
    – edosjoy
    2 авг 2022 в 18:21
  • - Uncaught ReferenceError: elements is not defined Что-то ни как
    – icode
    3 авг 2022 в 10:08
  • В переменную elements нужно сложить все дивы (обновил код в ответе).
    – edosjoy
    3 авг 2022 в 11:07
  • Все отлично работает! Могли подсказать как еще возможно, чтобы добавлять класс не только совпавшему элементу, а еще так же 3 элементам после него и 3 элементом до. То есть, если совпало 12:00, добавить класс к 12, а так же 11 10 9 и 13 14 15?
    – icode
    4 авг 2022 в 7:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.