多個noUiSlider實例化問題

Question

我想在一個頁面中創建多個noUiSliders，但是我得到這個錯誤「noUiSlider.create需要一個單一的元素」。

基本上，我從不同的功能實例化兩個（或更多）滑塊（不同類），但我得到上述錯誤。

任何有此插件經驗的人？

下面是一個例子：

var Slider1Handler = function(){ 

var slider1 = document.getElementsByClassName('slider1'); 
noUiSlider.create(slider1, { 
     start: [ 0 ], 
     connect: [true, false], 
     step: 1000, 
     tooltips: true, 
     orientation: "horizontal", 
     range: { 
     'min': [ 2000 ], 
     'max': [ 10000 ] 
     } 
}); 
}; 

var Slider2Handler = function(){ 

var slider2 = document.getElementsByClassName('slider2'); 
noUiSlider.create(slider2, { 
     start: [ 0 ], 
     connect: [true, false], 
     step: 1000, 
     tooltips: true, 
     orientation: "horizontal", 
     range: { 
     'min': [ 2000 ], 
     'max': [ 10000 ] 
     } 
}); 
}; 

Answer 1

getElementsByClassName返回一個nodeList，而不是一個單一的元件。您可以使用以下任意選項：

• 向元素添加一個id並使用getElementById;
• 取nodeList中的第一個元素：document.getElementsByClassName（'slider2'）[0];
• 使用document.querySelector('.slider2')，其中將返回單個元素;