Использование оператора if / else со временем для изменения класса объектов

Question

Я хочу иметь возможность определять класс объекта в зависимости от времени - в настоящее время у меня есть два класса, recommendedspot и notrecommended. Я пробовал приведенный ниже код, однако изображение выглядит не так, как хотелось бы.

Ниже мой код:

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

Вот еще одно решение, использующее javascript case только с одним элементом html. Он просто обеспечивает правильное изображение в определенный момент времени. Также обрабатывает временные рамки вне заданного logi c (ночное время?) ...

обновление добавлено альтернативное 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="">

Answer 2

Вы не справились с равенствами, т.е. когда ваше время 6/9/17/21. Выполнение равенств разрешит вашу проблему.

Answer 3

Проблема в том, как подчеркивали другие, что сравнения не то, что вы хотите. Кроме того, отсутствует половина logi c: когда вы рекомендуете что-то в одном временном интервале, вам придется удалить его в другом, если вы не sh, чтобы показать это.

Это - это тестируемое решение с более простым для понимания кодом.

Вы можете проверить это, заменив 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

вы не обрабатываете время должным образом, сделайте это примерно так: -

`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

Надеюсь, это поможет.