Javascript：尝试将多个通配符 ID 放入循环中

如何解决Javascript：尝试将多个通配符 ID 放入循环中

我有一个页面，上面会有多个 tiny sliders，我正在尝试将滑动控件的多个通配符 ID 拉入此循环。

 // Define all carousels.
  const carousel = document.querySelectorAll('.carousel-wrap');
  // Loop in case there are multiple on one page.
  (carousel).forEach(slider => {
  // See what the output is of the controls ids.
  console.log(document.querySelectorAll('[id^=controls-id]'))
      tns({
        container: slider,controlsContainer: document.querySelectorAll('[id^=controls-id]'),});
    }
  );

如果我看看 document.querySelectorAll('[id^=controls-id]') 的输出是什么，它会显示：

NodeList(2) [ul#controls-id-2.card__controls,ul#controls-id-11.card__controls]
0: ul#controls-id-2.card__controls
1: ul#controls-id-11.card__controls

所以这看起来是正确的，页面上有 2 个轮播，控件容器具有唯一的 ID。

问题是，当我这样做时：

controlsContainer: document.querySelectorAll('[id^=controls-id]'),

出现错误

Uncaught TypeError: Cannot read property '0' of undefined

我怀疑这与这里的循环有关，以及我如何尝试将每个控件容器的动态 ID 放入 controlsContainer:

也许我想做的事情是不可能的。 我是 Vanilla JS 的新手，所以我确定我遗漏了一些东西。请注意，如果我删除自定义控件容器，则一页上的多个滑块会按预期工作（默认控件位于滑块上方。）

解决方法

您似乎将值传递给 tns() 是错误的。
您提供的文档@github 声明 controlsContainer 的类型必须是 Node | String | false，但您正在传递 NodeList。要仅传递一个元素，请尝试使用 querySelector() 仅选择一个：

controlsContainer: document.querySelector('[id^=controls-id]')