如何(动态地)将大量滑块连接到输入域？
由于这个页面似乎是参考(除了官方的jquery文档)，当涉及到高级jquery问题时，我会在这里发布我的问题。我有一个ajax表单，最多有80个(！)滑块，基本上它工作得很好。但也有一些滑块，范围从0到500，这是很多步骤，特别是滑块的高度只有90px。你可以想象，它可以退出一个动作，将滑块移动到某个特定的值，有时这几乎是不可能的。
因此，我想另外提供通过输入字段输入值的机会。你有什么想法吗，如何实现这一点，甚至不需要生成80个输入？我的想法是，单击特定的句柄，输入字段将把值传输到。这应该没有问题，但是如何让连接“反转”，所以如果您在输入字段中输入值，它将被传输到句柄？
提前感谢，这是一个很棒的网站……
Maschek
回答 2
Stack Overflow用户
发布于 2011-03-21 20:20:00
这是我不久前针对这种情况开发的一些代码。我在输入中有一个名为‘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 );
});更新:进一步解释
请注意此处选中的up/right和down/left键代码。这是因为用户只需在任一方向上将滑块轻推1即可。当输入是3位数值时，这特别有用，例如255。
我真心希望这篇文章能帮助你，促进你的学习！如果有任何问题，请发表评论！在keyup事件处理程序的选择器中，您可以指定任何内容，以获取您希望由/可以控制滑块的所有输入。
Stack Overflow用户
发布于 2011-03-28 21:02:08
我做了一些小的修改，现在它的工作与一个单一的输入字段的所有滑块。下面是我所做的:在函数"sliderUpdateInput“中，我添加了行"document.getElementById("whatever").setAttribute("data-controlled-by"，this.id)；。然后在输入字段中添加id=“then”。现在唯一需要注意的是，在滑块属性“data-controlled by”中，值与滑块的id相同，因此您可以使用this.id在函数"sliderUpdateInput“中应用它。因此，每次单击或拖动滑块时，input-attribute的值都会更改为相应的滑块。
如果你想要显示每个滑块的所有输入，你不需要这个，但在我的脚本中没有空间来容纳所有的输入，所以我认为更好的是，无论如何只使用一个输入，让它更具动态性。
谢谢你的解决方案，我特别喜欢输入值与滑块实时对应的方式。
https://stackoverflow.com/questions/5377321
复制相似问题
腾讯云开发者
