jQuery移動延遲滑塊事件

Question

選擇最后一個值時，我嘗試啟動滑塊事件。 這個想法是，創建類似密碼鎖的東西。 我有這個解決方案：

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

 });

也許有更好的解決方案，因為用戶必須等待3秒鍾才能發生某些事情？

這是我的小提琴

Answer 1

這個怎么樣？

$("#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!!!");
  }
});

編輯

我也給你弄了個小提琴： https : //jsfiddle.net/EliteSystemer/7hpbanq9/

我進行更改的原因是，每次組合錯誤時，我都不會希望拋出錯誤，而只是在正確的情況下。

每次更改其中一個滑塊時，以上代碼都會提供自動驗證。 另一種方法是添加用於手動驗證的按鈕。 請讓我知道您是否要這樣做，我也會提供一個示例。