根据星期的不同，活跃的列表元素

Question

我目前正在做一个利用HTML，JavaScript和CSS的网站（大呜呜--我知道）。

我正在使用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-statements来高亮列表元素，我在网上也没能找到一个好的例子或指南。我能找到的最类似的问题是这样的。文本取决于一天中的时间和一周中的某一天。

但我还是很不理解如何继续。

任何帮助是非常感激的。

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>