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秒才会发生事情？

Here is my fiddle

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/

我改变的原因是，每次我的组合错误时，我都不希望出现错误，但只有在错误时才会出错。

上面的代码每次更改其中一个滑块时都会提供自动验证。另一种方法是添加用于手动验证的按钮。如果这就是你想要的，请告诉我，我也会提供一个例子。

jquery移动延迟滑块事件

1 个答案: