jQueryでHTML5範囲のスライダー入力値

単純なif/elseステートメントを実行しようとしています。たとえば、「スライダーの値が100の場合は、pタグにマイルクラスにいくつかのテキストを追加します。私はそれが何かシンプルであることを知っていますが、私はjQueryのドキュメントを見て、解決策を見つけませんでした。jQueryでHTML5範囲のスライダー入力値

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

出典

2016-10-06 Walt

あなたの要件が少し不明瞭ですが、おそらくあなたは、このような何かを探している：

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>

出典

2016-10-06 01:37:28 MJH

少し違ったことを探していますが、スライダの値が100のときに "Pass"を印刷する必要があります。もし75や他の人が "Fail"を印刷したら – Walt

それはすでにやっていることではありませんか？私はあなたの元の機能していない 'if'文を削除するようにちょうど今編集しましたが、それはsinppetの機能を変更しません。 – MJH

申し訳ありません。申し訳ありません。あなたのコードスニペットを正しく見ていませんでした。ありがとう、もう一つのこと。合格するか失敗するかを一度だけ表示するには？ – Walt

jQueryでHTML5範囲のスライダー入力値

答えて

関連する問題