我想创建一个函数，将时刻与一组div类进行比较（如果措辞不正确，这是新的编码方法，抱歉）

Question

我无法通过说明if .... === 12（下面的示例）来创建许多if语句，但是我想通过从标记为9、10的div类中提取来将其合并为一个， 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");
}

我的思想过程使我相信应该是这样

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

我在正确的轨道上吗？任何帮助表示赞赏！

Answer 1

我会对此有所不同。更改HTML，以便可以定位的每个元素都有一个共同的类。例如，除了具有1类或2类之外，这些元素也将具有hour类：

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

然后您可以先简单地遍历所有.hour元素：

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

而且，类不应以数字开头]：

Which characters are valid in CSS class names/selectors?

名称必须以下划线（_），连字符（-）或字母（a–z）开头，后跟任意数量的连字符，下划线，字母或数字。

因此1，2等的类别无效。也许更改为：

<div class="hour-1 hour"></div>
<div class="hour-2 hour"></div>
然后使用

function hourTrack() {
  $('.hour').css("background-color", "blue");
  $(`.hour-${moment().hour()}`).css("background-color", "red");
}
取决于HTML结构，如果已经可以从选择器中唯一标识那些元素，则可以避免使用独立的.hour类。

Answer 2

首先，设置与一个小时匹配的所有类（.0至.24），并将背景设置为蓝色（例如：不是当前小时）。然后将当前的更改为红色。