Активный элемент списка в зависимости от дня недели

Question

В настоящее время я работаю над сайтом, использующим HTML, JavaScript и CSS (Большой w oop - я знаю).

Я бегу bootstrap, чтобы узнать, как сделать сайт немного более отзывчивым. В настоящее время я пытаюсь изучить различные функции даты в JavaScript и хочу, чтобы мой веб-сайт выделял разные элементы списка в зависимости от того, какой это день недели.

                <ul class="list-group">
                    <li class="list-group-item" >Mondays: 09:00 - 16:00</li>
                    <li class="list-group-item">Tuesdays: 09:00 - 16:00</li>
                    <li class="list-group-item">Wednesdays: 09:00 - 16:00</li>
                    <li class="list-group-item">Thursdays: 09:00 - 16:00</li>
                    <li class="list-group-item">Fridays: 09:00 - 12:00</li>
                    <li class="list-group-item">Saturdays: Closed</li>
                    <li class="list-group-item">Sundays: Closed</li>
                </ul>

Сам список является стандартным Неупорядоченный список, который отображает часы работы и который я хочу создать через JavaScript, заключается в том, что если веб-сайт обнаружит, что сегодня понедельник, он выделит понедельник.

Я написал следующий код, чтобы веб-сайт проверял дата:

function daysOpen(){

let daysOfWeek = ['Sunday','Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
let dateObject = new Date()
let today = dateObject.getDay();
//console.log("Today is: " + today); // generates output to console
//console.log(daysOfWeek[today]) <- This is used for debugging

if(daysOfWeek[today] === 'Saturday' || daysOfWeek[today] ==='Sunday'){ // This piece of code lets me check date from
    //system time(?) and compare against my array to see if today is open or closed
    console.log("Store is closed")
}
else
{
    console.log("The store is open")
}

}

Вот где я застрял. Я не уверен, как использовать оператор if для выделения элементов списка, и я не смог найти хороший пример или руководство в Интернете. Самый похожий вопрос, который я мог найти, был таким: текст зависит от времени суток и дня недели

Но у меня все еще возникают проблемы с пониманием того, как продолжить.

Любая помощь очень ценится.

Answer 1

Вы можете изменить html следующим образом.

function daysOpen() {
  let daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  let dateObject = new Date()
  let today = dateObject.getDay();

  if (daysOfWeek[today] === 'Saturday' || daysOfWeek[today] === 'Sunday') {
    let elem = document.querySelector("li.day-" + today);
    elem.classList.add("highlight");
    console.log("Store is closed")
  } else {
    console.log("The store is open")
  }
}

daysOpen();

li.highlight {
  background-color: red;
}

<ul class="list-group">
  <li class="list-group-item day-1">Mondays: 09:00 - 16:00</li>
  <li class="list-group-item day-2">Tuesdays: 09:00 - 16:00</li>
  <li class="list-group-item day-3">Wednesdays: 09:00 - 16:00</li>
  <li class="list-group-item day-4">Thursdays: 09:00 - 16:00</li>
  <li class="list-group-item day-5">Fridays: 09:00 - 12:00</li>
  <li class="list-group-item day-7">Saturdays: Closed</li>
  <li class="list-group-item day-0">Sundays: Closed</li>
</ul>

Добавлены следующие изменения:

1. Добавлены пользовательские css для выделенного класса
2. Добавлено уникальное имя класса на основе кода дня для каждого класса
3. Добавлено выделение класса на основе нашего условия If

Не забудьте инициализировать вызов функции при необходимости

Предложение : Если возможно, передача даты из внутреннего кода будет более надежной. Плагин типа jQuery помогает нам сократить наши усилия по написанию таких кодов и сокращает количество строк кода.

Answer 2

Более короткий путь с троичным оператором. Если вам просто нужно получить день, вы можете связать метод Day () следующим образом.

Редактировать: я добавил метод, если вы хотите установить стиль для активного дня и другой для всех неактивных дней

/*first method only highlight active day*/
let today = new Date().getDay();
let okDay = document.getElementById(today);

today !== 0 && today !== 6 ?
  okDay.classList.add("open-day") :
  okDay.classList.add("close-day");

/*********************
 *edit second method *
 *********************/
const weekDays = document.querySelectorAll("li[data-day]");

function getCurrentDay() {
  Array.prototype.map.call(weekDays, d => {
    +d.dataset.day === today && (today !== 0 || today !== 6) ?
      d.classList.add("open-day") :
      d.classList.add("close-day");
  });
}
getCurrentDay();

* {
  box-sizing: border-box;
}

.list-group-item {
  list-style: none;
  color: gray;
}

.open-day {
  width: 100%;
  padding: 5px;
  background-color: coral;
  color: white;
  font-size: 18px;
}

.close-day {
  width: 100%;
  padding: 5px;
  background-color: #333333;
  color: white;
  font-size: 18px;
}

<ul class="list-group">
  <li class="list-group-item" id="1">Mondays: 09:00 - 16:00</li>
  <li class="list-group-item" id="2">Tuesdays: 09:00 - 16:00</li>
  <li class="list-group-item" id="3">Wednesdays: 09:00 - 16:00</li>
  <li class="list-group-item" id="4">Thursdays: 09:00 - 16:00</li>
  <li class="list-group-item" id="5">Fridays: 09:00 - 12:00</li>
  <li class="list-group-item" id="6">Saturdays: Closed</li>
  <li class="list-group-item" id="0">Sundays: Closed</li>
</ul>

<ul class="list-group">
  <li class="list-group-item" data-day="1">Mondays: 09:00 - 16:00</li>
  <li class="list-group-item" data-day="2">Tuesdays: 09:00 - 16:00</li>
  <li class="list-group-item" data-day="3">Wednesdays: 09:00 - 16:00</li>
  <li class="list-group-item" data-day="4">Thursdays: 09:00 - 16:00</li>
  <li class="list-group-item" data-day="5">Fridays: 09:00 - 12:00</li>
  <li class="list-group-item" data-day="6">Saturdays: Closed</li>
  <li class="list-group-item" data-day="0">Sundays: Closed</li>
</ul>