如何从 HTML 滑动条获取元素到 JavaScript 变量
[英]How to get element from HTML sliding bar to a JavaScript variable
问题描述
I have this working script.
我有这个工作脚本。 It simply loop through and Object and display the object key in HTML as sliding bar.它只是循环遍历和 Object 并将 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>
What I want to do, as user move the sliding bar, I'd like to get the element.我想要做什么，当用户移动滑动条时，我想获取元素。
I am looking at something like these lines.我正在看类似这些线的东西。 But not sure where to put it.但不确定把它放在哪里。
var userFCchoice = document.getElementsByName('foldchange_threshold');
console.log(userFCchoice);
So if user slide to the value 3 the console log should print it out.因此，如果用户滑动到值3 ，控制台日志应将其打印出来。 How can I go about it?我该怎么办？
2 个解决方案
解决方案1
1 2015-09-15 09:40:59
Have you tried using .slider functionality?您是否尝试过使用.slider功能？
I've made a little example of getting the value to console.log, in the example below I'm using the jquery-ui.min.js and jquery-ui.css so that you can use the .slider .我已经做了一个获取值到 console.log 的小例子，在下面的例子中我使用了jquery-ui.min.js和jquery-ui.css以便你可以使用.slider 。
slide: - This section will show the value as 3 in the console.log slide: - 此部分将在console.log中将值显示为3
change: - This section will show the value in foldchange_threshold as 3.5 change: - 本节将foldchange_threshold的值显示为3.5
storedElementValue - I've create this as a global variable to store the value of the ui.value for later use. storedElementValue - 我将它创建为一个global变量来存储ui.value的值供以后使用。
.css() - You can add the .css() to quickly add values of how you want to style the element or you could also use .addClass() to add a class to the slider and then you change the style in your css style sheet .css() - 您可以添加.css()以快速添加您想要如何设置元素样式的值，或者您也可以使用.addClass()向滑块添加一个类，然后您更改css的样式样式表
// Global variable to store value of the slider element var storedElementValue = 0; $(function($) { 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").slider({ min: 0, // min value max: foldchange_thresholds.length - 1, // max value step: 1, value: 0, // default value of slider slide: function(e, ui) { // Show console log of element value console.log(ui.value); storedElementValue = ui.value; }, change: function(e, ui) { var thresholdIndex = parseInt(ui.value, 10); $("#foldchange_threshold").html(foldchange_thresholds[thresholdIndex]); $("#foldchange_threshold_storedValue").html("Stored value for later use: " + storedElementValue); } }).css("width", "200px"); });
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css" rel="stylesheet" /> <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> <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> <!doctype html> <html> <body> <!-- Display the sliding bar --> <div id="threshold"></div> <br> <!-- Show foldchange threshold --> <div id="foldchange_threshold" style="display: inline-block; align:center;"></div> <br> <div id="foldchange_threshold_storedValue" style="display: inline-block; align:center;"></div> </body> </html>
解决方案2
1 2015-09-15 09:48:51
No need for external plugins for this, jQuery is enough - You can attach your own mousedown , mousemove , mouseup combination to read the range input while dragging around:不需要外部插件，jQuery 就足够了 - 你可以附加你自己的mousedown , mousemove , mouseup组合来在拖动时读取范围输入：
JSnippet DEMO - Input range live update while dragging JSnippet DEMO - 拖动时输入范围实时更新
$(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);
});
EDIT:编辑：
Afetr some comments here is an update with the working example that saves the value to a "global" variable while dragging: Afetr 这里的一些评论是工作示例的更新，该示例在拖动时将值保存到“全局”变量：
JSnippet DEMO update - Input range live update while dragging update JSnippet DEMO 更新- 拖动更新时输入范围实时更新
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.