jquery - 如何访问当前范围滑块?
问题描述
我有 2 个范围输入(比如 100),并且想将每个输入的值附加到一个数组中,例如:
<input id="range1" type="range" max="2">
<input id="range2" type="range" max="2">
<script>
var items=new Array();
items[1]=new Array("dog","horse","cat");
items[2]=new Array("x","y","z");
for (x=1;x<3;x++){
$('#range'+x).rangeslider({
polyfill : false,
onSlideEnd: function(position, value) {
console.log(items[x][value]);
}
});
}
</script>
当前逻辑总是打印items[2][blah]
值,因为在循环结束时x=2。如何访问范围滑块内的当前输入(因此提取其 ID)(或者可能在该循环内为每个滑块创建一个局部变量而不是 x 以摆脱全局变量 X)?
解决方案
onSlideEnd
您可以像这样在事件中获取元素和当前值
$(document).ready(function() {
// you can also use $('*[id^="range-"]').rangeslider({
$('.range-slider').rangeslider({
polyfill: false,
onSlideEnd: function(position, value) {
// access to the range-input: this.$element
// the example shows the id of the range element
console.log(this.$element.attr('id'));
// access to the current value
console.log(value);
}
});
});
.rangeslider { margin-bottom: 35px; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.js"></script>
<input id="range-1" class="range-slider" type="range" max="2" />
<input id="range-2" class="range-slider" type="range" max="2" />
<input id="range-3" class="range-slider" type="range" max="2" />
推荐阅读
- mysql - 如何在 mysql 中更新 If 条件中的字段为真?
- c# - WPF - 如何为 DataTemplate 进行通用绑定?
- docker - RaspberryPI 上的 Docker 不安装 Pyyaml
- php - Php 的 Elephant.io 服务器错误(尝试建立与服务器的连接时发生错误)
- openlayers - 如何在 OpenLayers 中正确释放已移除层的 WebGL 资源?
- sql - MySQL好友关系
- reactjs - 使用 Material UI Autocomplete 和 React 挂钩表单进行错误验证
- c++ - 如何正确对齐结构?
- javascript - 使用 typescript 将类型定义为 history.push() 已作为有效负载传递给 saga?
- spring-cloud - 如何在没有服务注册中心的情况下使用 FeignClient?