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

Question

如果这是一个对 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() 从数组中添加和删除数据更易于管理（对我而言）。
而不是必须为每个创建的按钮创建多个函数，尤其是动态的。

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

Answer 1

我想我明白你的意思，比如：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',
    'file5.pdf',
  ],
    'group_3': [
    'file1.pdf',
    'file2.pdf',
    'file3.pdf',
    'file4.pdf',
    'file5.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>

Answer 2

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

<script>
  var btns = [
      {
        id:'bnt1',
        title: 'btn1'
      },
      {
        id:'bnt2',
        title: 'btn2'
      },
      {
        id:'bnt2',
        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>

Answer 3

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, 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>