如果 ID 包含 Javascript

Question

我有关注JS

    var slider = new Slider("#testslider", {
        tooltip: 'always'
    });

按 ID 设计我的 bootstrap 滑块。我想为该区域的每个滑块设置样式，所以我尝试将它们全部放在一个 DIV 中，例如：

<div id="testslider">
//all sliders
</div>

这只会设置第一个滑块的样式。

我尝试了 [id^="testslider"] 并命名了此方案中的每个滑块：testslider1、testslider2 等

但这只会设置第一个滑块的样式。现在使用 document.querySelectorAll([id^="testslider"]); 我可以 select 所有 ID 但我不知道如何将其放入

var slider = new Slider("#testslider", {
    tooltip: 'always'
});

Answer 1

Now with document.querySelectorAll([id^="testslider"]); I could select all IDs but I can't figure out how to put that into

var slider = new Slider("#testslider", {
  tooltip: 'always'
});

我想你绝对需要 id 来实例化工具提示插件...
使用循环遍历每个元素，获取特定的 id 以实例化滑块：

const allSliders = Array.from(document.querySelectorAll('[id^="testslider"]'));
console.log("allSliders length:", allSliders.length)

allSliders.forEach((element) => {
  console.log("id for tooltip:", "#"+element.id)  // To check if the right ids are used
  new Slider("#"+element.id, {  // The specific id is used here
    tooltip: 'always'
  });
})

如果 ID 包含 Javascript

If ID contains Javascript

javascript

multiple-columns

ids