0

私は3つのnoUISlidersを使用しています。3 つのスライダーの出力を結合して、html 出力を作成したいと考えています。具体的には、この組み合わせを使用して、1 番目のスライダーからの出力、3 は 2 番目のスライダー、5 は 3 番目のスライダーからの画像ファイル (つまり、img135.jpg) を選択します。27 個の画像があります。3 つのスライダー (111.jpg、211.jpg、311.jpg などから 555.jpg まで) の結合出力に基づいて 1 つを選択できるようにしたいと考えています。

出力を提供する 3 つのスライダーがあります。

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

基本的に、スライダーのいずれかが変更されたときにイベントを取得し、その出力テキストを更新します (これは自分で行いました)。最後のステップは、3 つの出力を使用可能なパスに結合する画像更新機能をトリガーすることです。

興味深いスライダー ライブラリですが、これまでに見たことがありません。

于 2015-12-08T19:46:48.037 に答える