Question

我从拥有ID和Value的数据库中动态创建了多个按钮，我通过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
    });
  });

});

如何在HTML onclick中调用类函数

1 个答案: