如何在函数的if条件中使用style visibility实现选月份时隐藏日期表多余天数

问题修复 #

你现有代码存在以下可直接导致功能失效的问题：

• 样式赋值错误：修改元素可见性时错误使用比较运算符==，应改用赋值运算符=
• 匹配值不统一：下拉框option的value为全小写格式，判断逻辑中使用首字母大写格式，永远无法匹配成功
• 无状态恢复逻辑：仅实现了隐藏逻辑，切换月份时此前隐藏的日期不会重新显示
• 可见性属性选择不当：visibility: hidden会保留元素占位导致表格留空，建议使用display: none完全隐藏
• 存在冗余未使用变量：monthsTable、monthsTitle两个变量定义后未被调用

修复后可正常运行的完整代码如下：

<label for="months">Month: </label>
<select name="months" id="months">
  <option value="">--Select month--</option>
  <option value="january">January</option>
  <option value="february">February</option>
  <option value="march">March</option>
  <option value="april">April</option>
  <option value="may">May</option>
  <option value="june">June</option>
  <option value="july">July</option>
  <option value="august">August</option>
  <option value="september">September</option>
  <option value="october">October</option>
  <option value="november">November</option>
  <option value="december">December</option>
</select>

<table class="months-table">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
  <tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
  <tr>
    <td>13</td>
    <td>14</td>
    <td>15</td>
    <td>16</td>
  </tr>
  <tr>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
  </tr>
  <tr>
    <td>21</td>
    <td>22</td>
    <td>23</td>
    <td>24</td>
  </tr>
  <tr>
    <td>25</td>
    <td>26</td>
    <td>27</td>
    <td>28</td>
  </tr>
  <tr class="extra-days-row">
    <td class="day-29">29</td>
    <td class="day-30">30</td>
    <td class="day-31">31</td>
  </tr>
</table>

const monthSelect = document.getElementById('months');
const extraDaysRow = document.querySelector('.extra-days-row');
const day29Cell = document.querySelector('.day-29');
const day30Cell = document.querySelector('.day-30');
const day31Cell = document.querySelector('.day-31');

// 月份-最大天数映射表
const monthDaysMap = {
  january: 31,
  february: 28,
  march: 31,
  april: 30,
  may: 31,
  june: 30,
  july: 31,
  august: 31,
  september: 30,
  october: 31,
  november: 30,
  december: 31
}

monthSelect.addEventListener('change', function() {
  const selectedMonth = this.value;
  // 未选择月份时全部显示
  if (!selectedMonth) {
    extraDaysRow.style.display = 'table-row';
    day29Cell.style.display = 'table-cell';
    day30Cell.style.display = 'table-cell';
    day31Cell.style.display = 'table-cell';
    return;
  }
  const maxDay = monthDaysMap[selectedMonth];
  // 先重置所有日期为显示状态
  extraDaysRow.style.display = 'table-row';
  day29Cell.style.display = 'table-cell';
  day30Cell.style.display = 'table-cell';
  day31Cell.style.display = 'table-cell';
  // 根据最大天数隐藏多余日期
  if (maxDay < 29) {
    extraDaysRow.style.display = 'none';
  } else if (maxDay < 30) {
    day30Cell.style.display = 'none';
    day31Cell.style.display = 'none';
  } else if (maxDay < 31) {
    day31Cell.style.display = 'none';
  }
})

优化建议 #

• 变量和类名使用语义化命名，避免使用thirty-1st-month这类可读性差的命名，后续维护更方便
• 用映射表替代冗长的多条件if判断，后续要新增闰年二月29天的逻辑只需修改映射表的取值即可，改动成本极低
• 使用addEventListener绑定事件，避免直接给onchange赋值覆盖其他同类型事件绑定
• 可后续扩展动态生成日期单元格的逻辑，不需要手动写所有tr和td，代码量会更精简

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