多个滑块具有相同的选项都在一个功能？ [英] multiple sliders with the same options all in one function?

问题描述

我使用jQuery UI创建6个滑块，使用相同的选项（调查）。

我想知道是否有一种方法来组合所有这些滑块

如果是这样，就会是这样：

  $（'＃slider'）。each（function（）{
 var $ this = $（this）.closest（'＃slider'）; 
 
 $（$ this）.slider（
 {
 value：100，
 min：0，
 max：100，
步骤：25，
 slide：function（event，ui）{
 $（'＃amount'）。val（'$'+ ui.value）; 
} 
}）; 
 $ （'#amount'）。val（$（'＃slider'）。slider（value））; 
  

$ b b

我环顾四周，看看是否可以找到一些相关的问题，但我仍然无法解决它。现在只有6个滑块中的第一个是可见的。

解决方案

不确定是什么问题。 jsFiddle示例 显示它只是一个基本设置。移动任何滑块在输入字段中显示滑块的值。

jQuery

  $（'。slider'）。slider（{
 slide：function（event，ui）{
 $（'input：eq（'+ $（this）.index '）.val（ui.value）; 
} 
}）; 
  

HTML

 < div class =slider>< / div> 
< div class =slider>< / div> 
< div class =slider>< / div> 
< div class =slider>< / div> 
< div class =slider>< / div> 
< div class =slider>< / div> 
< input />< br /> 
< input />< br /> 
< input />< br /> 
< input />< br /> 
< input />< br /> 
< input /> 
  

编辑：更新代码以反映评论。 p>

I'm using jQuery UI to create 6 sliders with the same options (survey).

I was wondering if there is a way to combine all of these sliders into one function, but have them operable individually?

If so, would it be something like this:

$('#slider').each(function () {
    var $this = $(this).closest('#slider');

    $($this).slider(
    {
        value: 100,
        min: 0,
        max: 100,
        step: 25,
        slide: function (event, ui) {
            $('#amount').val('$' + ui.value);
        }
    });
    $('#amount').val($('#slider').slider("value"));

I looked around to see if I could find some related questions, but I still can't solve it. Right now, only the first out of 6 sliders is visible.

解决方案

Not sure what the issue is. This jsFiddle example shows that it's just a basic setup. moving any slider shows that slider's value in the input field.

jQuery

$('.slider').slider({
    slide: function(event, ui) {
        $('input:eq('+ $(this).index() +')').val(ui.value);
    }
});​

HTML

<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<input /><br />
<input /><br />
<input /><br />
<input /><br />
<input /><br />
<input />​

Edit: updated code to reflect comment.

这篇关于多个滑块具有相同的选项都在一个功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！