gpt4 book ai didi

javascript - 如何从 HTML 滑动条获取元素到 JavaScript 变量

转载 作者:行者123 更新时间:2023-11-27 23:38:57 25 4
gpt4 key购买 nike

我有这个工作脚本。它只是循环遍历对象并显示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);
});

编辑:

这里的一些评论是对工作示例的更新,在拖动时将值保存到“全局”变量:

JSnippet DEMO update - Input range live update while dragging update

关于javascript - 如何从 HTML 滑动条获取元素到 JavaScript 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32582347/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com