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

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

css html javascript

user29519291 · 技术社区 · 10 月前

因此,我为一个正在运行的博客提供了一个简单的菜单,但我试图弄清楚是否有方法重用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 回复 | 直到 10 月前

Raja Jahanzaib 10 月前

你可以通过 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>

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

9 月前

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

9 月前

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

9 月前

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

9 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

9 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

10 月前

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

10 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

10 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

10 月前

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

10 月前