Question

因为这个页面似乎是参考（除了官方的jquery文档），当谈到高级jquery问题时，我会在这里发布我的问题。我有一个带有多达80（！）滑块的ajax形式，基本上它的工作正常。虽然有一些滑块，范围从0到500，这是很多步骤，特别是，因为滑块的高度只有大约90px。你可以想象，它可以退出一个动作来将滑块移动到某个值，有时几乎是不可能的。

所以我想另外给出通过输入字段输入值的机会。您是否有任何想法，如何实现这一点，甚至可能无需生成80个输入？我的想法是这样的，点击特定的句柄和输入字段将获得传输的值。这应该没有问题，但如何使连接“反转”，所以如果你在输入字段中输入一个值，它将被传输到句柄？

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

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-controlled-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-controlled-by“，this.id）;”。然后在输入字段中添加了id =“whatever”。现在唯一需要注意的是，在滑块属性“data-controlled-by”中，该值与滑块的id相同，因此您可以使用this.id在函数“sliderUpdateInput”中应用它。因此，每次单击或拖动滑块时，input-attribute的值都将更改为相应的滑块。

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

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

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

3 个答案:

更新：进一步说明