Подсвечивание текущего дня недели?

197

12 мая 2019, 14:40

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

<ul class="list-group"> 
  <li class="list-group-item"><b>Понедельник:</b> 10:00–18:00</li> 
  <li class="list-group-item"><b>Вторник:</b> 10:00–18:00</li> 
  <li class="list-group-item"><b>Среда:</b> 10:00–18:00</li> 
  <li class="list-group-item"><b>Четверг:</b> 10:00–18:00</li> 
  <li class="list-group-item"><b>Пятница:</b> 10:00–18:00</li> 
  <li class="list-group-item"><b>Суббота:</b> 10:00–18:00</li> 
  <li class="list-group-item"><b>Воскресение:</b> 10:00–18:00</li> 
</ul>

Answer 1

Ради такой задачи тянуть jQuery бессмысленно, потому проще сделать на чистом JS. Например, используя Date.getDay. Стоит учесть, что в getDay неделя начинается с воскресенья, потому воскресенье - 0, понедельник - 1 и так далее. Исходя из этого, можно сделать что-то в этом роде:

let weekDay = new Date().getDay(); 
 
document.getElementsByClassName('list-group-item')[weekDay === 0 ? 6 : weekDay-1].classList.add('current')

.current { 
  color: red; 
}

<ul class="list-group"> 
  <li class="list-group-item"><b>Понедельник:</b> 10:00–18:00</li> 
  <li class="list-group-item"><b>Вторник:</b> 10:00–18:00</li> 
  <li class="list-group-item"><b>Среда:</b> 10:00–18:00</li> 
  <li class="list-group-item"><b>Четверг:</b> 10:00–18:00</li> 
  <li class="list-group-item"><b>Пятница:</b> 10:00–18:00</li> 
  <li class="list-group-item"><b>Суббота:</b> 10:00–18:00</li> 
  <li class="list-group-item"><b>Воскресение:</b> 10:00–18:00</li> 
</ul>

Создание интернет-магазина электроники в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как вывести div с id классом?

скрипт который выводит <span style="color:#0FB10F">Сохранено</span> после удачной операции, как вывести его именно в <div id="block"> я предпологаю что...

166

jQuery