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 回答