JavaScript嵌套for循环失效：考勤日历日期填充异常问题

问题原因 #

1. 嵌套循环逻辑错误：选择周一的分支里，外层循环遍历每个目标div，内层循环又完整遍历4到35的所有数值，导致每个div最终被内层循环的最后一个值（35）覆盖，而非依次赋值递增日期。
2. 变量冗余与类型问题：重复定义date_selected、du变量；lastOpt未转换为数字类型，可能引发循环边界判断错误；部分DOM操作可合并简化。

修复后的完整代码 #

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="http://localhost/tradebill/pages/main/employee/attendance.css">
<style>
    select {
        width: 10%;
    }

    #experiment_month {
        display: grid;
        grid-template-columns: repeat(7, 10%);
        grid-gap: 1rem;
        background-color: transparent;
        padding-top: 3rem;
    }

    #experiment_month div {
        background-color: red;
        border: 1px solid black;
        border-radius: .4rem;
        color: white;
        font-size: 3rem;
        display: grid;
        grid-template-columns: repeat(7, 10%);
        grid-template-rows: repeat(5, 10%);
        grid-gap: 1rem;
    }
</style>

<select name="" id="year" class="year">
    <option value="">select</option>
    <option value="2021">2021</option>
    <option value="2022">2022</option>
</select>
<select name="" id="month">
    <option value="">select</option>
    <option value="january">january</option>
    <option value="february">february</option>
</select>
<select name="" id="day_select_from" onchange="first_day_of_month()">
    <option value="">select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<select name="" id="weekday-from-year">
    <option value="sunday">sunday</option>
    <option value="monday">monday</option>
    <option value="tuesday">tuesday</option>
    <option value="wednesday">wednesday</option>
    <option value="thursday">thursday</option>
    <option value="friday">friday</option>
    <option value="saturday">saturday</option>
</select>
<div id="experiment_month">
    <?php
    for ($day = 1; $day <= 31; $day++) {
        echo "<div id='date_on_day_$day'>x</div>";
    }
    ?>
</div>

<script>
    function first_day_of_month() {
        const dateSelected = parseInt($('#day_select_from').val());
        if (dateSelected < 1 || dateSelected > 7) return;

        // 获取最后一个选项的数值并转成数字
        const lastOpt = parseInt($('#day_select_from').find('option:last-child').val());
        // 清空所有日期div的内容
        for (let i = 1; i <= lastOpt; i++) {
            $('#date_on_day_' + i).html('');
        }

        // 定义每个星期几对应的起始div索引
        const weekdayStartMap = {
            sunday: 7,
            monday: 1,
            tuesday: 2,
            wednesday: 3,
            thursday: 4,
            friday: 5,
            saturday: 6
        };
        const startIndex = weekdayStartMap[$('#weekday-from-year').val()];
        // 设置起始日期
        $('#date_on_day_' + startIndex).html(dateSelected);

        // 填充后续递增日期
        for (let x = startIndex + 1; x <= lastOpt; x++) {
            const currentDate = dateSelected + (x - startIndex);
            $('#date_on_day_' + x).html(currentDate);
        }
    }
</script>

关键优化点 #

1. 移除嵌套循环：直接通过x - startIndex计算当前div对应的递增日期，避免值被覆盖。
2. 统一逻辑处理：用对象映射星期几和起始div索引，替换冗余的多分支if判断，代码更简洁易维护。
3. 变量规范：使用const/let替代var，避免变量提升问题；统一变量命名，移除重复定义。
4. CSS简化：用repeat(7, 10%)替代重复的百分比值，提升CSS可读性。
5. 边界判断优化：函数开头直接过滤不符合条件的输入，减少无效逻辑执行。

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