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(); 
}); 

基本上你得到一个事件时，任何滑块的改变，你再继续以更新其输出文本（您自己完成的），最后一步是触发图像刷新功能，将三个输出组合成可用路径。

有趣的滑块库的方式，我从来没有见过它！