JS多次插入内容

Question

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

我想我知道执行此操作的代码行，但我无法弄清楚这一点。我试过 insertAfter.forEach(table, toggleBar); 但没用。

  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);
      });
    });
  }

我用的是Aurelia所以我的观点很简单。我只是传递一些可绑定的属性。

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

Answer 1

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

有几种解决方法。您可以更改调用 attached 的频率；你可以在 table 上设置一个标志，如果它已经有一个切换按钮并跳过它；或者您可以检查切换按钮是否已经存在并更新它。

JS多次插入内容

JS inserting content multiple times

javascript

loops

aurelia