活动列表元素取决于星期几

Question

我目前正在开发一个使用HTML、JavaScript和CSS的网站(我知道(。

我正在运行引导程序来学习如何使网站更具响应性。我目前正在尝试学习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>