代码之家 › 专栏 › 技术社区 › user29519291

为不同的变量创建一个带有可重用Click函数的简单菜单

css html javascript

user29519291 · 技术社区 · 5 月前

因此,我为一个正在运行的博客提供了一个简单的菜单,但我试图弄清楚是否有方法重用Click函数。所以菜单只包括年份和月份。

2025 月份月份月份的条目在这里

2024 月份月份月份的条目在这里

当用户点击年份时,会出现为特定年份选择月份的选项,然后当用户点击月份时,下面会加载一个md文件。

当用户点击月份时,函数JAN()将执行以加载博客条目。

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

我想弄清楚的是如何编写JAN()函数,使其可重用,而不是每个月都写同样的东西。我在考虑在函数中加入一个动态变量,从div id或类似的东西中获取名称,但不确定如何实现。

对此,一个简单的解决方案是什么?谢谢!

1 回复 | 直到 5 月前

Raja Jahanzaib 5 月前

你可以通过 year 和 month 作为参数,使您的函数像这样动态:

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

然后像这样调用函数:

<button onclick="loadEntry(2025, 'JAN')">January 2025</button>
<button onclick="loadEntry(2024, 'FEB')">February 2025</button>

如果有任何混淆或需要澄清,请告诉我。

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

4 月前

Mass · 如何在Tailwind CSS v4中创建配置

4 月前

magenta placenta · 将css变量合并为一个变量

4 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

4 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

5 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

5 月前

Luckkks · 过渡色工作不正常

5 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

5 月前