NoUIslider - 結合輸出值創建html

Question

我使用3個noUlISliders。我想結合3個滑塊的輸出來創建一個html輸出。具體來說，我想使用組合來選擇一個圖像文件（即。img135.jpg），其中1是第一個滑塊的輸出，3是從第二個，5是從第三個。我有27張圖片 - 我希望能夠根據3個滑塊（111.jpg，211.jpg，311.jpg等通過555.jpg）的組合輸出來選擇一個。

我有三個滑塊提供輸出：

var slider1 = document.getElementById('slider1'); 
 

 
noUiSlider.create(slider1, { 
 
    start: 1, 
 
    connect: 'lower', 
 
    orientation: 'horizontal', 
 
    range: { 
 
    'min': 1, 
 
    'max': 5 
 
    }, 
 
    snap: true, 
 
    format: wNumb({ 
 
    decimals: 0 
 
    }) 
 
}); 
 

 

 

 
var sliderOutput1 = document.getElementById('value-slider1'); 
 

 
slider1.noUiSlider.on('update', function(values, handle) { 
 
    sliderOutput1.innerHTML = values[handle]; 
 
}); 
 

 

 
var sliderOutput2 = document.getElementById('value-slider2'); 
 

 
slider2.noUiSlider.on('update', function(values, handle) { 
 
    sliderOutput2.innerHTML = values[handle]; 
 
}); 
 

 

 
var sliderOutput3 = document.getElementById('value-slider3'); 
 

 
slider3.noUiSlider.on('update', function(values, handle) { 
 
    sliderOutput3.innerHTML = values[handle]; 
 
}); 
 

 

 
var image_path = 'img' + sliderOutput1.val() + sliderOutput2.val() + sliderOutput3.val() + '.jpg'; 
 

 
("#img").html(image_path);

<div id="slider1"></div> 
 
<div id="slider2"></div> 
 
<div id="slider3"></div> 
 

 

 
<span id="value-slider1"> </span> 
 
<span id="value-slider2"> </span> 
 
<span id="value-slider3"> </span> 
 

 
<div id="img"></div>

滑塊都在並輸出值。我需要如何採取下一步的建議。 我對jscript很新穎，所以你可以提供的任何幫助或建議都將非常感謝。

肯

Answer 1

你可以把它很多票友，但像下面一個簡單的模式應該是罰款：

function updatePicture() { 
    var image_path = 'img' + sliderOutput1.val() + sliderOutput2.val() + sliderOutput3.val() + '.jpg'; 

    // I assume the missing $ was a typo 
    $("#img").html(image_path); 
} 

slider1.noUiSlider.on('update', function(values, handle) { 
    sliderOutput1.innerHTML = values[handle]; 
    updatePicture(); 
}); 


var sliderOutput2 = document.getElementById('value-slider2'); 

slider2.noUiSlider.on('update', function(values, handle) { 
    sliderOutput2.innerHTML = values[handle]; 
    updatePicture(); 
}); 


var sliderOutput3 = document.getElementById('value-slider3'); 

slider3.noUiSlider.on('update', function(values, handle) { 
    sliderOutput3.innerHTML = values[handle]; 
    updatePicture(); 
}); 

基本上你得到一個事件時，任何滑塊的改變，你再繼續以更新其輸出文本（您自己完成的），最後一步是觸發圖像刷新功能，將三個輸出組合成可用路徑。

有趣的滑塊庫的方式，我從來沒有見過它！