如何從HTML滑動條獲取元素到JavaScript變量

我有這個工作腳本。它只是循環瀏覽Object並在HTML中顯示對象鍵爲滑動條。如何從HTML滑動條獲取元素到JavaScript變量

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控制檯日誌應該把它打印出來。我怎麼去解決它？

來源

2015-09-15 neversaint

您是否嘗試過使用.slider功能？

我已經舉了一個小例子來獲取console.log的值，在下面的示例中，我使用的是jquery-ui.min.js和jquery-ui.css，以便您可以使用.slider。

slide: - 本節將展示在console.log

change:值作爲3 - 此部分將顯示爲3.5

storedElementValue在foldchange_threshold的價值 - 我創建這個作爲global變量存儲ui.value的值供以後使用。

.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>

來源

2015-09-15 09:40:59

謝謝。但我需要將'console.log（ui.value）;'的值存儲在一個變量中。稍後會將該變量傳遞給一個函數。我怎樣才能做到這一點？ – neversaint

@neversaint檢查我更新的答案，我做了所謂的'foldchange_threshold_storedValue'一個額外的元素，以顯示我可以使滑塊較短，其存儲以備後用 –

@neversaint如果有別的，只問:) –

無需爲此外部插件，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

來源

2015-09-15 09:48:51

謝謝，但我需要存儲'的console.log（$（本）.VAL（））;'變成一個變量，稍後將它傳遞給一個函數。我怎樣才能做到這一點？ – neversaint

'valueTemp = $（本）.VAL（）;'聲明價值的功能之外...... –

做了編輯一起來看看。 –

如何從HTML滑動條獲取元素到JavaScript變量

回答

相關問題