Javascript：试图将多个通配符 id 拉入循环

Question

我有一个页面将有多个 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 的新手，所以我确信我遗漏了一些东西。请注意，如果我删除自定义控件容器，一页上的多个滑块将按预期工作（默认控件位于滑块上方。）

Answer 1

看来您将值传递给 tns() 是错误的。
您提供的文档 @ github 指出 controlsContainer 的类型必须是 Node | String | false，但您传递的是 NodeList。要仅传递一个元素，请尝试使用 querySelector():

仅选择一个

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

Javascript：试图将多个通配符 id 拉入循环

Javascript: Trying to pull multiple wildcard ids into a loop

javascript

arrays

carousel