jQuery的HTML5范围滑块输入值

debugcn 发表于 Dev

沃尔特

我尝试执行简单的if / else语句，因此例如“如果滑块上的值为100，则将带有一些文本的p标签附加到Miles类中”。我知道这很简单，但是我浏览了jQuery文档，却没有找到适合我的解决方案。

HTML：

<html><head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div class="wrapper">
        <div class="miles"></div>
        <div class="battery-slider">
            <input class="slider-range" type="range" value="0" min="75" max="250" step="25">
            <span class="slider-value">0</span>
        </div>
    </div>
</body>
</html>

JavaScript：

var rangeSlider = function(){
    var slider = $('.battery-slider'),
    range = $('.slider-range'),
    value = $('.slider-value');
    miles = $('.miles');

    slider.each(function(){
        value.each(function(){
            var value = $(this).prev().attr('value');
            $(this).html(value);
        });
        range.on('input', function(){
            $(this).next(value).html(this.value);
        });
    });

    if ( $(range).val(value) == 100 ) {
        $(miles).append( "<p>Pass</p>" );
    }
    else {
        $(miles).append( "<p>Fail</p>" );
    }
};
rangeSlider();

MJH

您的要求还不清楚，但是也许您正在寻找类似以下的内容：

var rangeSlider = function(){
    var slider = $('.battery-slider'),
    range = $('.slider-range'),
    value = $('.slider-value');
    miles = $('.miles');

    slider.each(function(){
      value.each(function(){
          var value = $(this).prev().attr('value');
          $(this).html(value);
      });
      range.on('input', function(){
        if ( this.value == 100 ) {
            $(miles).append( "<p>Pass</p>" );
        }
        else {
            $(miles).append( "<p>Fail</p>" );
        }

        $(this).next(value).html(this.value);
      });
    });
};
rangeSlider();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
    <div class="battery-slider">
        <input class="slider-range" type="range" value="0" min="75" max="250" step="25">
        <span class="slider-value">0</span>
    </div>
    <div class="miles"></div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。