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 that you have read and understand our privacy policy and code of conduct.

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