0

我正在尝试构建一个使用 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 似乎在运行时将一些自己的类附加到滑块上。

谢谢

4

2 回答 2

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);
    }
});
于 2012-05-03T12:02:57.213 回答
0

您是否想在一次通话中简单地制作所有答案 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 + "%" );
        }
});
于 2012-04-10T01:42:30.607 回答