如何为博客年月菜单编写可复用的onClick函数以加载对应月份的MD文件

嘿，这个问题其实很容易解决！你现在每个月份都写一个单独的函数，确实有点重复劳动，咱们把它改成一个通用的可复用函数就搞定了，具体可以这么做：

第一步：编写通用的加载函数 #

把原来的JAN()改成一个能接受年份和月份作为参数的函数，这样它就能根据传入的参数去请求对应的MD文件了：

function loadMonthEntry(year, month) {
  let entry = document.querySelector(`#entry`);
  fetch(`/journal/entries/${year}/${month}.md`)
    .then(async r => {
      if (r.ok) {
        mdparse(await r.text(), {"permissive": true, "section": true})
          .then(parsedContent => {
            entry.innerHTML = parsedContent;
          });
      }
    });
}

第二步：在HTML中直接调用通用函数 #

接下来，你只需要在每个月份的点击元素上，传入对应的年份和月份就行，比如：

<!-- 2025年的月份选项 -->
<div class="year-2025">
  <h3 onclick="toggleMonths(this)">2025</h3>
  <span onclick="loadMonthEntry('2025', 'JAN')">JAN</span>
  <span onclick="loadMonthEntry('2025', 'FEB')">FEB</span>
  <span onclick="loadMonthEntry('2025', 'MAR')">MAR</span>
</div>

<!-- 2024年的月份选项 -->
<div class="year-2024">
  <h3 onclick="toggleMonths(this)">2024</h3>
  <span onclick="loadMonthEntry('2024', 'JAN')">JAN</span>
  <span onclick="loadMonthEntry('2024', 'FEB')">FEB</span>
</div>

（这里的toggleMonths是你原来控制月份显示/隐藏的函数，不用修改它，只替换月份的点击事件即可）

更优雅的方式：用事件委托（推荐） #

如果你的菜单是动态生成的（比如从后端获取年份和月份），或者不想在HTML里写太多onclick，可以用事件委托的方式，只需要绑定一次事件就能处理所有月份的点击：

首先给年月菜单结构加上统一的类和自定义属性：

<div class="menu-container">
  <div class="year-section">
    <h3 class="year-title">2025</h3>
    <div class="month-list">
      <span class="month-item" data-year="2025" data-month="JAN">JAN</span>
      <span class="month-item" data-year="2025" data-month="FEB">FEB</span>
    </div>
  </div>
  <div class="year-section">
    <h3 class="year-title">2024</h3>
    <div class="month-list">
      <span class="month-item" data-year="2024" data-month="JAN">JAN</span>
    </div>
  </div>
</div>

然后在JS里绑定一次事件监听：

// 给父容器绑定点击事件
document.querySelector('.menu-container').addEventListener('click', function(e) {
  // 判断点击的是月份元素
  if (e.target.classList.contains('month-item')) {
    // 从自定义属性里获取年份和月份
    const year = e.target.dataset.year;
    const month = e.target.dataset.month;
    // 调用通用加载函数
    loadMonthEntry(year, month);
  }
});

这种方式的好处是，不管你后面新增多少年份和月份，都不用修改JS代码，只要保证新的月份元素有month-item类和对应的data-year、data-month属性就行，维护起来特别方便。

这样一来，你就不用再为每个月份写重复的函数了，一个loadMonthEntry就能搞定所有情况！

备注：内容来源于stack exchange，提问作者user29519291