0

ページでnoUISliderを使用して、ユーザーが値を選択できるようにしています。ただし、noUISliderの言葉は、人がスライドしているときに、基本的に数値をチェックする機能を実行し、数値が特定の値を下回っている場合はdivにテキストを表示するようにしたいと考えています。

問題は、非表示の入力に値が記録されるのに、テキストを表示する機能がまったく機能しないことです。

関数のコードは次のとおりです。

var heightSlide = $('.height-noUI');
var onSlide = function(){
    var slideHeight = "$('input[name=CAT_Custom_8]').val();"
    if(slideHeight <= 20){
        $('.height-noUI-text').text('Short');
    }else if(slideHeight <= 40){
        $('.height-noUI-text').text('Short to Medium');
    }else if(slideHeight <= 60){
        $('.height-noUI-text').text('Medium');
    }else if(slideHeight <= 80){
        $('.height-noUI-text').text('Medium to Tall');
    }else if(slideHeight <= 100){
        $('.height-noUI-text').text('Tall');
    }
};
heightSlide.on('slide', onSlide);

これは、動作するスライダーを含むコードのjsFiddleです。

スライダーがスライドしたときにテキストが div に表示されるようにコードを更新するにはどうすればよいですか?

4

1 に答える 1

1

私はあなたの問題を解決しました。理解するためにコードをチェックアウトします。

ここにjsfiddleがあります

$(function() {

    $(".height-noUI").noUiSlider({
       range: [0, 100],
       start: 0,
        range: {
        'min': [0],
        'max': [100]
        },
       step: 20,
       connect: "lower",
       serialization: {
          lower: [
              $.Link({
                  target: $("input[name=CAT_Custom_8]")
              })
          ],
          format: {
            decimals: 0
          }
       }
    });

    var heightSlide = $('.height-noUI');
    var onSlide = function(){
        var slideHeight = $('.noUi-origin').position().left / $('.noUi-origin').parent().width() * 100; //Here is the trick.
        if(slideHeight <= 20){
            $('.height-noUI-text').text('Short');
        }else if(slideHeight <= 40){
            $('.height-noUI-text').text('Short to Medium');
        }else if(slideHeight <= 60){
            $('.height-noUI-text').text('Medium');
        }else if(slideHeight <= 80){
            $('.height-noUI-text').text('Medium to Tall');
        }else if(slideHeight <= 100){
            $('.height-noUI-text').text('Tall');
        }
    };
    heightSlide.on('slide', onSlide);

});
于 2014-05-13T03:14:53.897 に答える