如何使用moment.js编写按小时为容器动态添加class的循环，解决blockHour报错

问题排查 #

你的代码存在以下几个核心错误：

• 变量重复声明：for循环头用let声明了blockHour，循环体内又用var重复声明同一变量，导致变量作用域混乱，也是你报blockHour未定义的直接诱因，且parseInt("hour"[1])逻辑完全错误，"hour"[1]取到的是字符u，转换后是NaN，根本拿不到正确的小时值。
• DOM操作方法不匹配：getElementsByClassName返回的是原生HTML元素集合，不是jQuery对象，直接调用jQuery的addClass方法会报错。
• 类型不匹配：moment().format('HH')返回的是字符串类型的小时值，和数字类型的blockHour用===全等判断永远不成立。
• 批量元素操作逻辑错误：你直接给所有timeContainer的集合统一加类，没有逐个遍历每个时间块匹配对应的小时状态，无法实现每个时间块单独加对应类的需求。
• 执行时机错误：给时间块加类的逻辑没有放在$(document).ready回调里，可能出现DOM还未加载完成就获取元素，拿到空集合的问题。

修正后的代码 #

JS部分

// 统一用jQuery选择器，避免原生和jQuery方法混用出错
const saveBtn = $('.saveBtn');
const timeContainer = $('.timeContainer');
const currentHour = Number(moment().format('HH')); // 转成数字方便比较

// 时间自动更新逻辑
var update = function () {
    const date = moment(new Date())
    $('#currentDay').html(date.format('dddd, MMMM Do YYYY, HH:mm:ss a'));
};

$(document).ready(function(){
    update();
    setInterval(update, 1000);

    // 遍历每个时间容器
    timeContainer.each(function() {
        // 从时间th的id中提取小时数字，比如id="hour9"提取出9
        const blockHour = Number($(this).find('.time').attr('id').replace('hour', ''));
        // 清空之前的状态类
        $(this).removeClass('past present future');
        // 匹配状态加对应类
        if (blockHour < currentHour) {
            $(this).addClass('past');
        } else if (blockHour === currentHour) {
            $(this).addClass('present');
        } else {
            $(this).addClass('future');
        }
    })
});

HTML部分注意事项

你所有的时间块th的id需要统一按照hour+数字的规则命名，比如10点的id为hour10，17点的id为hour17，和上面的提取逻辑匹配即可。

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