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

Question

我有一个页面，上面有多个小滑块，我正试图将多个通配符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个carousel与唯一的id控件容器。

问题是，当我做这一点时:

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

我得到一个错误

Uncaught TypeError: Cannot read property '0' of undefined

我怀疑这与这里的循环以及我如何试图将每个控制容器的动态id获取到controlsContainer:

有关也许我想做的是不可能的。我是一个新手在香草JS所以我肯定我错过了什么。注意，如果我删除自定义控件容器，一个页面上的多个滑块将按预期工作(默认控件位于滑块上方)

Answer 1

似乎你是传递值给tns()错误。
您提供的docs @ github声明controlsContainer的类型必须是Node | String | false，但您正在通过NodeList。要只传递一个元素，尝试使用querySelector():

只选择一个元素

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