I would like to create a function that compares the hours from moment to a set of div classes (new to coding sorry if this is worded incorrectly)

Question

I can't get this to work creating many if statements by stating if moment.... === 12(example below) but I would like to consolidate it to one by pulling from my div classes labeled 9, 10, 11, 12, 1, 2, 3, 4, 5

function hourTrack() {
 if (moment().hour() === 12)
 $(".12").css("background-color", "red");
 $( ".1, .2, .3, .4, .5,").css("background-color", "blue");
}

My thought process leads me to believe it should be something like

function hourTrack() {
     if (moment().hour() === parseInt(the div id number)
}

Am I on the right track? Any help appreciated!

What are you doing after the `if`? Can you show more of the repetitive `hourTrack` functions? — Snow, Jan 01 '20 at 20:30
yep, just updated my code. I am trying to make color changes to a div once the time has passed or is currently on the time — RES3127, Jan 01 '20 at 20:39
So you want to update it frequently? As in the user opens the page at 09:59 it should mark all divs with class .9 and a minute later, at 10:00, it should mark .10? Or only once on page load? — pascalpuetz, Jan 01 '20 at 20:43
Did you test this anywhere? Perhaps you can recreate it for us? — Marco V, Jan 01 '20 at 21:18

score 1 · Accepted Answer · answered Jan 01 '20 at 20:49

I'd approach this a little differently. Change the HTML so that each element which could be targeted has a class in common. For example, in addition to having a class of 1, or a class of 2, these elements would also have a class of hour too:

<div class="1 hour"></div>
<div class="2 hour"></div>

Then you can simply iterate over all .hour elements first:

function hourTrack() {
  $('.hour').css("background-color", "blue");
  $(`.${moment().hour()}`).css("background-color", "red");
}

But also, classes should not start with numbers:

Which characters are valid in CSS class names/selectors?

a name must begin with an underscore (_), a hyphen (-), or a letter(a–z), followed by any number of hyphens, underscores, letters, or numbers.

So the classes of 1, 2, etc, aren't valid. Maybe change to:

<div class="hour-1 hour"></div>
<div class="hour-2 hour"></div>

and then use

function hourTrack() {
  $('.hour').css("background-color", "blue");
  $(`.hour-${moment().hour()}`).css("background-color", "red");
}

Depending in the HTML structure, you might be able to avoid the standalone .hour classes if those elements can already be uniquely identified from a selector.

pascalpuetz · Answer 2 · 2020-01-01T20:53:25.570

First, set all classes that match an hour (.0 to .24) and set the background to blue (as in: not the current hour). And then change the current one to red.

// An array containing numbers from "0...24"
var allHours = new Array(25).fill(0).map(function(num, index) { return index });
// A string containing all hours as classes ".0, .1, .2 ... .24"
var allHoursAsClasses = allHours.map(function(num) {return '.'+num}).join(', ');
function markCurrentHour() {
   // the current hour
   var currentHour = moment().hour();
   $(allHoursAsClasses).css("background-color", "blue");
   $('.' + currentHour).css("background-color", "red");
}

You could even make it so that the current hour is not changed back to prevent blinking issues.

var allHours = new Array(25).fill(0).map(function(num, index) { return index });
function markCurrentHour() {
   var currentHour = moment().hour();
   var allHoursExceptCurrent = allHours.filter(function(hour) { return hour !== currentHour})
   var allHoursAsClassesExceptCurrent = allHoursExceptCurrent .map(function(num) {return '.'+num}).join(', ');

   $(allHoursAsClassesExceptCurrent).css("background-color", "blue");
   $('.' + currentHour).css("background-color", "red");
}

I appreciate the help! I will try this out as well. I am really interested in learning the different avenues that can be taken to solve a problem. — RES3127, Jan 01 '20 at 21:08

I would like to create a function that compares the hours from moment to a set of div classes (new to coding sorry if this is worded incorrectly)

2 Answers2