如何点击不同按钮时动态修改downloadURI函数的参数？

我有3个按钮的HTML结构：

<div id='dwbuttons' class="cards">
    <div>
      <div class="image-div">some image here</div>
      <a id="Autotune" class='Autotune' href="whait.html" target="_blank">autotune</a>
    </div>
    <div>
      <div class="image-div">some image here</div>
      <a id="Complete" class='Complete' href="whait.html" target="_blank">Cmplete</a>
    </div>
    <div>
      <div class="image-div">some image here</div>
      <a id="FLstudio"  class='FLstudio' href="whait.html" target="_blank">FLstudio</a>
    </div>
</div>

每个按钮需要下载不同类型的文件，计划用同一个downloadURI函数处理所有操作，当前JS代码如下：

let Auto = document.getElementById('Autotune')
let complete = document.getElementById('Complete')
let flstudio = document.getElementById('FLstudio')

let buttons = document.getElementById("dwbuttons")


function downloadURI(uri, name) {
    // 错误重置了参数，需删除
    name = ''
    uri = ''

    let link = document.createElement("a");

    link.setAttribute('download', name);
    link.href = uri;
    document.body.appendChild(link);
    link.click();
    link.remove();
}


buttons.onclick = function(){
  setTimeout(
    downloadURI, 1000
  )
}

技术问询：如何在点击对应按钮时，将downloadURI函数的name和uri参数修改为对应值？
具体需求：

• 点击第一个按钮时，参数为name = Autotune，uri = autotune
• 点击第二个按钮时，参数为name = Complete，uri = complete
• 点击第三个按钮时，参数为name = FLstudio，uri = flstudio

不想为每个按钮编写单独函数导致代码冗余（后续可能扩展到15个按钮），猜测可以用数组或映射实现，但缺乏相关经验，寻求解决方案。

解决方案 #

核心思路 #

用事件委托+参数映射表的方式实现，既避免冗余代码，又方便后续扩展：

1. 定义一个映射对象，存储每个按钮ID对应的下载参数（name和uri）
2. 在父容器dwbuttons上监听点击事件，通过事件对象获取实际点击的按钮
3. 根据按钮ID从映射表中取出对应参数，调用下载函数

修改后的完整代码 #

// 1. 定义参数映射表，后续加按钮只需新增条目
const downloadMap = {
  Autotune: { name: 'Autotune', uri: 'autotune' },
  Complete: { name: 'Complete', uri: 'complete' },
  FLstudio: { name: 'FLstudio', uri: 'flstudio' }
};

const buttonsContainer = document.getElementById("dwbuttons");

// 2. 修复downloadURI函数，保留传入的参数
function downloadURI(uri, name) {
  const link = document.createElement("a");
  link.setAttribute('download', name);
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  link.remove();
}

// 3. 事件委托处理点击
buttonsContainer.onclick = function(e) {
  // 确保点击的是目标a标签
  const targetBtn = e.target.closest('a');
  if (!targetBtn) return;

  const btnId = targetBtn.id;
  // 从映射表中获取对应参数
  const params = downloadMap[btnId];
  if (!params) return;

  // 4. 延迟调用下载函数，用箭头函数传递参数
  setTimeout(() => {
    downloadURI(params.uri, params.name);
  }, 1000);
  
  // 阻止原a标签的跳转行为
  e.preventDefault();
};

关键说明 #

• 参数映射表downloadMap：后续新增按钮时，仅需在该对象中添加新的键值对（键为按钮ID，值为对应的name和uri），无需修改事件处理逻辑，扩展性极强。
• 事件委托：仅在父容器绑定一次事件，无论新增多少子按钮都能响应点击，避免给每个按钮单独绑定事件的冗余操作。
• 修复downloadURI函数：删除原函数中重置参数的代码，确保能正常接收外部传递的值。
• 阻止默认跳转：通过e.preventDefault()阻止a标签原本的跳转行为，只保留下载功能。

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