Question

我有这个工作脚本。它只是循环通过和对象和显示 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，控制台日志应将其打印出来。我怎么能去做呢？

Answer 1

您是否尝试过使用.slider功能？

我已经举了一个例子来获取console.log的值，在下面的示例中，我使用了jquery-ui.min.js和jquery-ui.css，以便您可以使用{ {1}}。

.slider - 此部分会在slide:

中将值显示为3

console.log - 此部分会将change:中的值显示为foldchange_threshold

3.5 - 我已将其设为storedElementValue变量，以存储global的值以供日后使用。

ui.value - 你可以添加.css()来快速添加你想要如何设置元素样式的值，或者你也可以使用.css()将一个类添加到滑块然后你更改.addClass()样式表

中的样式

＆＃13;

css

＆＃13;

// 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");
});

＆＃13;

Answer 2

不需要外部插件，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

如何将HTML滑动条中的元素转换为JavaScript变量

2 个答案: