Question

我在页面上使用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中？

Answer 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);

});

范围滑块 - 滑动期间的运行功能不起作用？

1 个答案: