NoUIslider - объединение выходных значений для создания HTML

Question

Я использую 3 noUISliders. Я хочу объединить выходные данные 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();
});

По сути, вы получаете событие, когда любой из ползунков изменяется, затем вы переходите к обновлению его выходного текста (что вы сделали сами), и последний шаг - это запуск функции обновления изображения, которая объединяет три выхода в полезный путь.

Кстати, интересная библиотека слайдеров, я никогда не видел ее раньше!