Javascript 多次插入内容

我正在开发一个只显示指定数量行的函数，并使用一个切换按钮显示所有行。我遇到的问题是，如果我在一个页面上有多个表，切换按钮将显示多次。如果有两个表，则每个表后面会显示两个按钮。如果有三个按钮，则每个表后将显示三个按钮

我想我知道做这件事的代码行，但就我个人而言，我无法理解这一点。我尝试了

insertAfter.forEach（表，切换栏）但它不起作用

  attached() {
    // Insert element after another
    function insertAfter(referenceNode, newNode) {
      referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
    }

    // Set multiple attributes on an element
    function setAttributes(el, attrs) {
      for (let key in attrs) {
        el.setAttribute(key, attrs[key]);
      }
    }

    // Toggle the rows on this table
    function toggleRows(table, rows, count) {
      // Loop through all the rows and toggle the hidden attribute
      for (let i = count; i < rows.length; i++) {
        rows[i].hidden ? rows[i].hidden = false : rows[i].hidden = true;
      }
    }

    // Gather all the tables to truncate based on the data-truncate attribute
    let truncatedTables = document.querySelectorAll('[data-truncate="true"]');

    // For each table to truncate
    truncatedTables.forEach(function(table) {
      let visibleRowCount = table.dataset.displayRows;
      let rows            = table.querySelectorAll('tbody tr');
      let toggleBar       = document.createElement('div');
      let toggle          = document.createElement('button');
      let toggleText      = '+ ' + (rows.length - visibleRowCount) + ' More';

      // Truncate the table
      for (let i = visibleRowCount; i < rows.length; i++) {
        rows[i].hidden = true;
      }

      // Style the toggle-bar and set appropriate attributes
      toggleBar.className = 'toggle-bar';
      toggleBar.append(toggle);
      setAttributes(toggle, {
        'role'         : 'button',
        'aria-expanded': 'false',
        'aria-controls': table.id,
        'data-action'  : 'rowToggle',
        'data-text'    : '+ More',
        'data-alttext' : '- Less'
      });

      // Edit the toggle text & alt text attribute
      toggle.innerText = toggleText;
      toggle.dataset.text = toggleText;

      // Add the toggleBar after this table
      insertAfter(table, toggleBar);

      // When clicking the toggle
      toggle.addEventListener('click', function() {
        // Toggle the button based on aria-expanded attribute
        if ( this.getAttribute('aria-expanded') === 'false' ) {
          this.innerText = this.dataset.alttext;
          this.setAttribute('aria-expanded', 'true');
        } else {
          this.innerText = this.dataset.text;
          this.setAttribute('aria-expanded', 'false');
        }

        // Toggle the table rows
        toggleRows(table, rows, visibleRowCount);
      });
    });
  }

attached（）{
//一个接一个地插入元素
函数insertAfter（referenceNode，newNode）{
referenceNode.parentNode.insertBefore（newNode，referenceNode.nextSibling）；
}
//在元素上设置多个属性
函数集合属性（el、ATTR）{
for（让输入属性）{
el.setAttribute（key，attrs[key]）；
}
}
//切换此表上的行
函数切换行（表、行、计数）{
//循环所有行并切换隐藏属性
for（设i=count；i

我使用的是Aurelia，因此我的观点非常简单。我只是传递一些可绑定的属性

<template>
<table data-truncate="${tableTruncate}" data-display-rows="${tableRows}" id="${tableId}">...
</table>
</template>


...
我认为最有可能的罪魁祸首是您的
附加的
函数被多次调用。我猜这是一个事件处理程序，它正在侦听要附加到文档的表，或者类似的内容，并且对每个表调用一次，因此3个表将导致添加3个按钮

有两种方法可以解决这个问题。您可以更改调用
attached
的频率；如果桌子上已经有一个切换按钮，你可以在上面设置一个标志，然后跳过它；或者您可以检查切换按钮是否已经存在并更新它。
您的视图是什么样子的？我正在使用Aurelia并传入一些绑定属性，因此视图非常简单。我将添加它。谢谢@jdb。这是非常有帮助的，是的，似乎“附件”就是问题（或者至少是问题的一部分）。我的查询选择器
document.querySelectorAll（'[data truncate=“true”]'）
似乎也有点太宽了。回到绘图板上。谢谢你的帮助！没问题，温迪。请随意向上投票，向其他人表明答案是有帮助的。