使用 if/else 语句随时间更改对象 class

Question

我希望能够根据时间确定 object 的notrecommended - 我目前有两个课程， recommendedspot和不推荐。 我已经尝试了下面的代码，但是图像并没有像我想要的那样出现。

下面是我的代码：

 var time = new Date().getHours(); if (time > 9 && time < 17) { document.getElementById("spotsouth").classList.remove('notrecommended'); document.getElementById("spotsouth").classList.add('recommendedspot'); } else if (time > 6 && time < 9) { document.getElementById("spotnorth").classList.remove('notrecommended'); document.getElementById("spotnorth").classList.add('recommendedspot'); } else if (time > 17 && time < 21) { document.getElementById("spotnorth").classList.remove('notrecommended'); document.getElementById("spotnorth").classList.add('recommendedspot'); } else {}

 .notrecommended { display: none; }.recommendedspot { display: inline; margin-left: 15px; max-width: 50px; }

 <img id="spotsouth" src="site-logo.png" alt="spot south" class="notrecommended"> <img id="spotnorth" src="site-logo.png" alt="spot north" class="notrecommended">

如果有人知道我哪里出错了，请告诉我，因为我似乎无法弄清楚。 提前致谢。

Answer 1

您没有正确处理时间，请执行以下操作：-

`var time = new Date().getHours();
 if (time >= 9 && time < 17) {
   document.getElementById("spotsouth").classList.remove('notrecommended');
   document.getElementById("spotsouth").classList.add('recommendedspot'); 
 } else if (time > 6 && time < 9) {
   document.getElementById("spotnorth").classList.remove('notrecommended');
   document.getElementById("spotnorth").classList.add('recommendedspot');
 } else if (time >= 17 && time < 21) {
   document.getElementById("spotnorth").classList.remove('notrecommended');
   document.getElementById("spotnorth").classList.add('recommendedspot');
} else {}`

处理时间即等于 6,17, 9

希望它会有所帮助。

Answer 2

您尚未处理等式，即当您的时间是 6/9/17/21 时。处理等式可以解决您的问题。

Answer 3

问题是，正如其他人所强调的那样，比较不是你想要的。 此外，缺少一半的逻辑：当您在一个时间段推荐某些内容时，如果您不想显示它，则必须在另一个时间段中删除它。

这是一个可测试的解决方案，具有更易于理解的代码。

您可以通过用实际数字替换new Date.getHours()来测试它，看看它是如何变化的。

 function promote(element) { element.classList.remove('notrecommend'); element.classList.add('recommendedspot'); } function demote(element) { element.classList.remove('recommendedspot'); element.classList.add('notrecommend'); } function processElements(time) { var southSpot = document.getElementById("spotsouth") var northSpot = document.getElementById("spotnorth"); var inMorning = time >= 6 && time < 9; var inWorkTime = time >= 9 && time < 17; var inEvening = time >= 17 && time <= 21 if (inWorkTime) { promote(southSpot); demote(northSpot); } else if (inMorning || inEvening) { promote(northSpot); demote(southSpot); } else { // this part of the code depends on what would you like to happen outside the // known time slots (this one hides both elements, but any other combination // is possible) demote(southSpot); demote(northSpot); } } processElements(new Date().getHours()); // test with actual numbers: 1, 6, 8, 9, 12, 17, 19, 21 for example to see how it changes: // processElements(1);

 .notrecommended { display: none; }.recommendedspot { display: inline; margin-left: 15px; max-width: 50px; }

 <img id="spotsouth" src="site-logo.png" alt="spot south" class="notrecommended"> <img id="spotnorth" src="site-logo.png" alt="spot north" class="notrecommended">

Answer 4

这是另一种使用 javascript case的解决方案，其中只有一个html元件。 它只是在给定时间提供正确的图像。 还处理给定逻辑之外的时间范围（夜间？）...

更新添加了一个备用switch ，因为有些人认为switch (true)不良行为。 替代首先确定适当的时间范围。

 var imgNorth = 'url/to/north.png'; var imgSouth = 'url/to/south.png'; var imgClose = 'url/to/close.png'; var image = document.getElementById("image"); var image2 = document.getElementById("image2"); var time = new Date().getHours(); /* Solution */ switch (true) { // conditional switch, some folks don't like this case (time >= 6 && time < 9): // Between 6 and 9 case (time >= 17 && time <= 21): // Between 17 and 21 image.src = imgNorth; image.alt = 'spot north'; break; case (time >= 9 && time < 17): // Between 9 and 17 image.src = imgSouth; image.alt = 'spot south'; break; case (time < 6 || time > 21): //?? image.src = imgClose; // No seats? closed? stand only?? image.alt = 'closed'; break; }; /* Alternate */ // Get timeframe var timeFrame = (time >= 6 && time < 9)? 1: ((time >= 17 && time <= 21)? 2: ((time >= 9 && time < 17)? 3: 4 )); switch (timeFrame) { // fall-through switch check, preferred case 1: case 2: // Between 6 and 9 or between 17 and 21 image2.src = imgNorth; image2.alt = 'spot north'; break; case 3: // Between 9 and 17 image2.src = imgSouth; image2.alt = 'spot south'; break; case 4: //?? image2.src = imgClose; // No seats? closed? stand only?? image2.alt = 'closed'; break; };

 <img id="image" src="site-logo.png" alt=""><br> <img id="image2" src="site-logo.png" alt="">