如何（动态）将大量滑块连接到输入字段？

Question

因为这个页面似乎是参考（除了官方 jquery 文档），当涉及到高级 jquery 问题时，我将在这里发布我的问题。我有一个 ajax 表单，最多有 80 个（！）滑块，基本上工作正常。不过，有一些滑块的范围从 0 到 500，这是很多步骤，特别是滑块的高度只有 90 像素左右。你可以想象，将滑块移动到某个值是可以退出的，有时几乎是不可能的。

所以我想另外提供通过输入字段输入值的机会。您知道如何实现这一点，甚至不需要生成 80 个输入吗？我的想法是这样的，单击特定的句柄，输入字段将获得传输到的值。这应该可以正常工作，但是如何“反转”连接，以便如果您在输入字段中输入一个值，它将被传输到句柄？

提前感谢，这是一个很棒的网站...

Maschek

Answer 1

您可以使用 .change()^docs 输入框的事件，并调用 value^docs 滑块的方法来更新它。

$('#your_input_id').change(function(){
                      $('#slider_id').slider('option','value',this.value);
                  });

示例 http://jsfiddle.net/gaby/MXZGE/ （黄色值是可更新的）

Answer 2

这是我不久前针对这种情况开发的一些代码。我在输入中有一个名为“data-control-by”的属性，该属性设置为与初始化滑块的 div 相同的值。例如，我的 html 中有这个：

<div id="slider-1" data-controls="slider-1-slider-blah"></div>
<input name="whatever" data-controlled-by="slider-1-slider-blah" />

在我的 js 中，我首先像这样初始化滑块：

$("#slider-1").slider({
  min: 0,
  max: 20,
  value: $("input[data-controlled-by='slider-1-slider-blah']").val(),
  slide: sliderUpdateInput,
  stop: sliderUpdateInput
});

注意上面的 sliderUpdateInput 回调函数，在幻灯片中使用（当用户滑动时）和停止（当用户停止滑动时）事件。其外观如下：

function sliderUpdateInput(e,u) {
  var slider = $(u.handle).parent();
  var controlled_input = $('input[data-controlled-by="' + slider.attr('data-controls') + '"]');
  if( u.value <= slider.slider('option', 'min') )
    controlled_input.val('');
  else
    controlled_input.val(u.value);
}

然后，在要更新的输入上，添加一个 keyup 处理程序，如下所示：

$('input[name="whatever"]').keyup(function(e) {
  var slider = $("div[data-controls='" + $(this).attr('data-controlled-by') + "']");
  var slider_min = slider.slider('option', 'min');
  var slider_max = slider.slider('option', 'max');

  // left or down
  if( e.keyCode == 37 || e.keyCode == 40 ) {
    if( isNaN( parseInt( $(this).val() ) ) )
      $(this).val(slider_min);
    if( parseInt( $(this).val() ) != slider_min )
      $(this).val( parseInt( $(this).val() ) - 1 );
    $(this).select();
  }
  // right or up
  else if( e.keyCode == 39 || e.keyCode == 38 ) {
    if( isNaN( parseInt( $(this).val() ) ) )
      $(this).val(slider_min);
    if( parseInt( $(this).val() ) != slider_max )
      $(this).val( parseInt( $(this).val() ) + 1 );
    $(this).select();
  }

  if( !isNaN( parseInt($(this).val()) ) )
    slider.slider('value', parseInt( $(this).val() ) );
  else
    slider.slider('value', slider_min );
});

更新：进一步说明

请注意此处检查的上/右和下/左键码。这样用户只需向任一方向将滑块微移 1 即可。当输入为 3 位数值（例如 255）时，这特别有用。

我真的希望这能帮助您并促进您的学习！有任何问题请评论！在 keyup 事件处理程序的选择器中，您可以指定任何内容，以便获得您希望由滑块控制/可以控制滑块的所有输入。

Answer 3

我做了一些小的修改，现在它可以为所有滑块使用一个输入字段。这就是我所做的：
在函数“sliderUpdateInput”中，我添加了行“document.getElementById("whatever").setAttribute("data-control-by", this.id);”。然后在输入字段中添加 id="whatever"。现在唯一需要注意的是，滑块属性“data-control-by”中的值与滑块的 id 相同，因此您可以使用 this.id 在函数“sliderUpdateInput”中应用它。因此，每次单击或拖动滑块时，输入属性的值都会更改为相应的滑块。

如果你想显示每个滑块的所有输入，你不需要这个，但在我的脚本中没有空间容纳所有这些输入，所以我认为最好只使用一个输入，让它有点更有活力。

感谢您的解决方案，我特别喜欢输入值与滑块实时对应的方式。