0

我正在使用 3 个 noUISlider。我想结合 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 的新手，因此您可以提供的任何帮助或建议将不胜感激。

肯

4

1 回答 1

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

基本上，当任何滑块发生变化时，您都会收到一个事件，然后您继续更新其输出文本（您自己已经完成），最后一步是触发图像刷新功能，它将三个输出组合成一个可用的路径。

顺便说一句，有趣的滑块库，我以前从未见过！

于 2015-12-08T19:46:48.037 回答