JavaScript如何根据当前小时为对应id元素添加指定类名

你的代码存在4个核心错误，修正后即可实现按时段自动添加对应样式类的效果：

• 时间取值错误：$.now() 返回的是Unix毫秒级时间戳，不是当前24小时制的小时数，无法直接和9-17的小时数值做比对
• 选择器错误：循环过程中没有把索引i拼接到id选择器中，且最后一个判断分支漏写了id选择器必需的#前缀，根本无法选中对应小时的DOM元素
• 类名写法错误：addClass() 方法接收的参数是纯类名字符串，不需要带CSS选择器语法里的.前缀
• 状态逻辑颠倒：当前小时大于循环值i时，对应时段属于已经过去的时间，应该添加past类；当前小时小于i时属于还未到的时间，应该添加future类，原代码把这两个类的对应关系写反了

var checkTime = function(){
    // 获取当前24小时制的小时数值
    const currentHour = new Date().getHours();
    // 遍历9点到17点的所有时段块
    for(let i = 9; i <= 17; i++){
        // 选中当前循环对应的小时DOM元素
        const $hourBlock = $(`#hour-${i}`);
        // 先清空旧的状态类，避免类名叠加导致样式异常
        $hourBlock.removeClass("past present future");

        if(currentHour > i){
            $hourBlock.addClass("past");
        } else if (currentHour === i){
            $hourBlock.addClass("present");
        } else {
            $hourBlock.addClass("future");
        }
    }
}
// 页面DOM加载完成后自动执行一次时间检测
$(checkTime);

补充提示：如果需要实现跨整点自动更新状态（比如到10点整时，9点的块自动从present切为past），可以加一行定时执行逻辑 setInterval(checkTime, 60000)，每分钟检测一次时间状态即可。

内容的提问来源于stack exchange，提问作者Oiicrow