javascript - 如何在html onclick中调用类函数

Question

我有多个从包含 id 和值的数据库动态创建的按钮，我通过 EventHandler 调用了一个类函数，它只对第一个按钮有效，如何从 onclick 调用类函数

<button data-add-tab id="51200844-100-RP" value="data_source" onclick="chromeTabs.addTab({title: 'New Tab',this.id,this.value,favicon: false});">Add new tab</button>
 <button data-add-tab id="51200520-483-RP" value="data_source1" onclick="chromeTabs.addTab({title: 'New Tab',this.id,this.value,favicon: false});">Add new tab</button>
 <button data-add-tab id="51200884-103-RP" value="data_source2" onclick="chromeTabs.addTab({title: 'New Tab',this.id,this.value,favicon: false});">Add new tab</button>

这是我的脚本，它适用于偶数处理程序

<script>
  var chromeTabs = new ChromeTabs()
  document.querySelector('button[data-add-tab]').addEventListener('click', _ => {
    chromeTabs.addTab({
      title: 'New Tab',
      id:_.target.id,
      value:_.target.value,
      favicon: false
    })
  })

你能帮帮我吗，谢谢。

Answer 1

您的事件处理程序仅适用于第一个按钮，因为 .querySelector() 仅返回与选择器匹配的第一个元素。

相反，您可以使用 .querySelectorAll() 选择与选择器匹配的所有 按钮.

然后您可以使用 Array.from( ... ).forEach( ... ) 遍历按钮并将事件处理程序附加到每个按钮。

<button data-add-tab id="51200844-100-RP" value="data_source">Add new tab</button>
<button data-add-tab id="51200520-483-RP" value="data_source1">Add new tab</button>
<button data-add-tab id="51200884-103-RP" value="data_source2">Add new tab</button>

const chromeTabs = new ChromeTabs();
const addTabButtons = document.querySelectorAll('button[data-add-tab]');

Array.from(addTabButtons).forEach(button => { //For each data-add-tab button

  button.addEventListener('click', _ => {     //Add a click handler
    chromeTabs.addTab({
      title: 'New Tab',
      id: _.target.id,
      value: _.target.value,
      favicon: false
    });
  });

});