我有这个工作脚本。它只是循环、对象和显示
HTML中的对象键作为滑动条。
jQuery(function($) {
$('#threshold').change(updateThreshold);
function updateThreshold () {
var thresholdIndex = parseInt($('#threshold').val(), 10);
$("#foldchange_threshold").html(foldchange_thresholds[thresholdIndex]);
};
var foldchange_thresholds = [];
var mydata = {"3":["c","d"], "3.5":["j","k"], "1.5":["a","b"], "2.5":["x","y"] };
Object.keys(mydata).sort().forEach(function(key) {
foldchange_thresholds.push(key);
});
$('#threshold').attr('max', foldchange_thresholds.length-1);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<body>
<!-- Display the sliding bar -->
<input id="threshold" type="range" min="0" max="1" step="1" value="0" />
<br>
<!-- Show foldchange threshold -->
<div id="foldchange_threshold" style="display: inline-block; align:center;"></div>
</body>
</html>我想做的是，当用户移动滑动条时，我想获取元素。
我在看这些线。但不知道放在哪里。
var userFCchoice = document.getElementsByName('foldchange_threshold');
console.log(userFCchoice);
因此，如果用户滑动到
3值，控制台日志应该打印出来。我该怎么办？ 最佳答案
不需要外部插件，jQuery就足够了-您可以附加自己的mousedown，mousemove，mouseup组合，在拖动时读取范围输入：
JSnippet DEMO - Input range live update while dragging
$(function() {
//Global variable that holds the value and updates while dragging.
var valueTemp = 0;
//Events functions:
var changeEvent = function(){
var thresholdIndex = parseInt($('#threshold').val(), 10);
$("#foldchange_threshold").html($(this).val());
};
var downEvent = function(){
$(this).bind('mousemove',moveEvent);
};
var moveEvent = function(){
//trigger the change or comment it and do what ever you want:
$(this).trigger('change');
//Store the value into a variable available by other functions as asked in the comments:
valueTemp = $(this).val();
console.log($(this).val());
};
var upEvent = function(){
$(this).unbind('mousemove');
};
//Bind events - mousemove is bind and unbind by the mousedown & mouseup events.
$('#threshold').change(changeEvent);
$('#threshold').mousedown(downEvent);
$('#threshold').mouseup(upEvent);
});
编辑：
Afetr此处的一些注释是一个工作示例的更新，该示例在拖动时将值保存到“全局”变量：
JSnippet DEMO update - Input range live update while dragging update
关于javascript - 如何将元素从HTML滑动条获取到JavaScript变量，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32582347/