具有特定变量的唯一 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

如果您需要为按钮配置动态数组并使用一些静态侦听器函数，您可以这样写。在这里你可以用任意数量的按钮更新数组（在我的例子中按钮需要有 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 2

我想我明白你的意思了，类似这样：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 - 我使用了属性“data”

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

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

Unique ID with a specific variable to call a function in an array using said variable

javascript

arrays

uuid

dom-events

electron