He seguido a JS
var slider = new Slider("#testslider", { tooltip: 'always' });Para diseñar mi control deslizante de arranque por ID. Quiero diseñar cada control deslizante en esa área, así que traté de ponerlos todos en un DIV como:
<div id="testslider"> //all sliders </div>Eso solo estilizará el primer control deslizante.
[id^="testslider"] y nombré cada control deslizante en este esquema: testslider1, testslider2, etc.
Pero eso solo le dará estilo al primer control deslizante. Ahora con document.querySelectorAll( [id^="testslider"] ); Podría seleccionar todas las identificaciones, pero no sé cómo poner eso en
var slider = new Slider("#testslider", { tooltip: 'always' });Ahora con document.querySelectorAll([id^="testslider"]); Podría seleccionar todas las identificaciones, pero no sé cómo poner eso en
var slider = new Slider("#testslider", { tooltip: 'always' }); Supongo que necesita absolutamente la id para instanciar el complemento de información sobre herramientas ...
Use un bucle para recorrer cada elemento, obtenga su id específica para instanciar el control deslizante:
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' }); })