具有特定变量的唯一 ID，用于使用所述变量调用数组中的函数

如何解决具有特定变量的唯一 ID，用于使用所述变量调用数组中的函数

如果这是 JavaScript 和 Electron.js 新手的愚蠢问题，我提前道歉。

在这个例子中，我有 Btn1,Btn2,Btn3 并且每个按钮都链接到一个特定的变量。
每个按钮的 onclick event 侦听器都连接到相同的 function 和或 array。
根据被点击的按钮，它将使用链接到被按下按钮的变量运行该函数。

let buttons = [btn1,btn2,btn3]
   
let open = document.getElementById('Btn1')
open.addEventListener('click',(event) =>{
   let btn1_value = 1
   //2 more of these for each button
})
}

我不只是拥有一组预设函数或一系列 if-case 语句。
因为我试图动态地允许用户使用相同的功能向我的软件添加按钮。
但是，使用存储在数组中的不同数据（在本例中为文件）。

由于我目前的知识，我决定尝试这样的方法。
使用 push() 和 pop() 从数组中添加和删除数据更易于管理（对我而言）。
不必为创建的每个按钮创建多个函数，尤其是动态的。

非常感谢任何帮助或指导。

解决方法

我想我明白你的意思，类似这样：https://jsfiddle.net/ve209L7j/2/

// File Groups,global scope
var files = {
    'group_1': [
    'file1.pdf','file2.pdf','file5.pdf',],'group_2': [
    'file3.pdf','file4.pdf','group_3': [
    'file1.pdf','file3.pdf',};

// btns to create
var btns = [
    {
    id: 'btn1',label: 'Files1',custom: 'group_1'
  },{
    id: 'btn2',label: 'Files2',custom: 'group_2'
  },{
    id: 'btn3',label: 'Files3',custom: 'group_3'
  },];

// create btns dynamic
function createButton(btn,listener) {
  const el = document.createElement('button');
  el.setAttribute('id',btn.id)
  el.setAttribute('data-custom',btn.custom);
  el.textContent = btn.label;
  el.addEventListener('click',listener);
  document.body.appendChild(el);
  return el;
}

// your callback listener
function btnCallback(event) {
  var custom = event.currentTarget.dataset.custom;
  console.log('files:',files[custom]);
}

// create buttons
btns.forEach(function(btn) {
  var buttonCreated = createButton(btn,btnCallback);
  // @TODO - something usefful with btn El if you need [buttonCreated]
});

---

老 AWSNER，在作者回复之前：

我的理解是你想使用相同的回调函数，但每个按钮都有不同的上下文/参数。

不管怎样，它也抽象了监听器绑定。 https://jsfiddle.net/ve209L7j/

Javascript：

var files = {};

function binder(ids,callback) {
  ids.forEach(function(id) {
    var btn = document.getElementById(id);
    btn.addEventListener('click',callback);
  });
}

function functionWithButtonContext(event) {
  var custom = event.currentTarget.dataset.custom;
  console.log('custom:',custom);
}

binder(['Button1','Button2','Button3'],functionWithButtonContext);
   

HTML - 我使用了属性“数据”

<button id="Button1" data-custom="btn1">
  Button 1
</button>
<button id="Button2" data-custom="btn2">
  Button 2
</button>
<button id="Button3" data-custom="btn3">
  Button 3
</button>

,

如果您需要为按钮配置使用动态数组并使用一些静态侦听器函数，您可以编写类似这样的内容。在这里，您可以使用任意数量的按钮更新数组（在我的示例中，按钮需要具有 id 和标题），它们都将被添加到 DOM 中

<script>
  var btns = [
      {
        id:'bnt1',title: 'btn1'
      },{
        id:'bnt2',title: 'btn2'
      },title: 'btn2'
      }
  ];

  function listener(event) {
    alert('Button - ' + event.target.id + ' has been clicked');

  }
  btns.forEach((btn) => {
      const el = document.createElement('button');
      el.setAttribute('id',btn.id)
      el.textContent = btn.title;
      el.addEventListener('click',listener);
      document.body.appendChild(el);
  });
</script>

,

let buttons = [btn1,btn2,btn3]
for(let i in buttons){
  document.getElementById(`Btn${i+1}`)
  .addEventListener(event)=>{
    //buttons[i] would be the unique number for each different button click listener
  }
}

在工作演示中..

let buttons = [0,0]
let p=document.getElementById('buttons')
p.innerText=buttons
for(let i in buttons){
  i=parseInt(i)
  document.getElementById(`Btn${i+1}`)
  .addEventListener('click',(event)=>{
    buttons[i]++
    p.innerText=buttons
  })
}

<button id="Btn1">Button 1</button>
<button id="Btn2">Button 2</button>
<button id="Btn3">Button 3</button>
<p id="buttons"></p>