2016-04-27 17 views
0

最後の値が選択されたときにスライダーイベントを開始しようとしました。アイデアは、コンビネーションロックのようなものを作成することです。 私はこのソリューションをしました:ユーザーが何かが起こる前に、3秒間待つ必要があるためjquery mobile delay sliderイベント

<div data-role="page"> 
<label for="slider1">first</label> 
<input data-type="range" name="slider1" id="slider1" value="10" min="0" max="20" /> 
<br> 
<label for="slider2">second</label> 
<input type="range" name="slider2" id="slider2" value="10" min="0" max="20" /> 
<br> 
<label for="slider3">third</label> 
<input type="range" name="slider3" id="slider3" value="10" min="0" max="20" /> 
</div> 

var seconds = 3, 
timer; 
$("#slider1, #slider2, #slider3").on("slidestop", function(e) { 
var slider1_value = $('#slider1').val(); 
var slider2_value = $('#slider2').val(); 
var slider3_value = $('#slider3').val(); 
var update = function() { 
if (slider1_value == 15 && slider2_value == 2 && slider3_value == 2) { 
    alert("Great!!!"); 

} else { 
    alert("Try it again!!!"); 
    } 
} 
if (timer) clearTimeout(timer); 
timer = setTimeout(update, seconds * 1000); 

}); 

はたぶんよりよい解決策は、ありますか?この約1

Here is my fiddle

答えて

0

どのように?

$("#slider1, #slider2, #slider3").on("slidestop", function(e) { 
    var slider1_value = $('#slider1').val(); 
    var slider2_value = $('#slider2').val(); 
    var slider3_value = $('#slider3').val(); 
    if (slider1_value == 15 && slider2_value == 2 && slider3_value == 2) { 
    alert("Great!!!"); 
    } 
}); 

私もあなたにフィドルをしたEDIT

:変更のためのhttps://jsfiddle.net/EliteSystemer/7hpbanq9/

私の理由は、私がエラーを持っているのは嫌だということですが、私の組み合わせが間違っているたびにキャストしかし、それが正しい時だけです。

上記のコードは、スライダの1つが変更されるたびに自動的に検証されます。別のアプローチは、手動で確認するためのボタンを追加することです。それがあなたが望むものであれば教えてください。私はそれについても例を挙げます。