Question

我正在尝试构建一个使用jQuery UI滑块的项目。它涉及对人进行调查，用户必须告诉他们对某些东西的确定程度，这就是滑块进入的地方。

    $(function() {
    $( "#slider-range-min1" ).slider({
        range: "min",
        value: 0,
        min: 0,
        max: 100,
        slide: function( event, ui ) {
            jQuery( "#amount1" ).val(ui.value + "%" );
        }
    });
$( "#amount1" ).val($( "#slider-range-min1" ).slider( "value" ) + "%" );
});

由于一个问题可能有4-5个答案，并且每个答案都有一个与之关联的滑块，因此对于20个问题的调查，将会有太多单独的滑块功能。我可以动态填充它们，但必须有更好的方法来执行此操作。就像用一个函数控制所有滑块并简单地将div id和输入id传递给它一样。

我尝试使用类而不是ID，但是当我这样做时，滑块就会消失，因为jQuery Ui似乎在运行时将几个自己的类附加到滑块上。

谢谢

Answer 1

tjscience的答案是正确的，但对你来说可能不完整。那怎么样：

<div class="container">
<input type="text" class="inputField"/>
<div id="answer-1" class="answer"></div>
</div>
<div class="container">
<input type="text" class="inputField"/>
<div id="answer-2" class="answer"></div>
</div>
<div class="container">
<input type="text" class="inputField"/>
<div id="answer-3" class="answer"></div>
</div>

$(".answer").slider({
    range: "min",
    value: 0,
    min: 0,
    max: 100,
    slide: function( event, ui ) {
        var container = $(ui.handle).parents(".container");
        $(container).find(".inputField").val(ui.value);
    }
});

Answer 2

您是否只想在一次通话中制作所有答案div滑块？如果是这样，这应该有效：

<div id="answer-1" class="answer"></div>
<div id="answer-2" class="answer"></div>
<div id="answer-3" class="answer"></div>

$(".answer").slider({
        range: "min",
        value: 0,
        min: 0,
        max: 100,
        slide: function( event, ui ) {
            jQuery( "#amount1" ).val(ui.value + "%" );
        }
});

是否可以将参数传递给jQuery UI滑块

2 个答案: