Question

我在页面上使用多个Jquery滑块，当页面加载时我想加载以前存储的值，因此一个滑块可能默认为25％，另一个滑块可能默认为50％等。

我在这里找到了类似的问题和解决方案：

Jquery UI slider handle on last saved value

这适用于一个滑块，但不适用于多个滑块！

例如我的滑块代码：

<div class="sliderVal" id="slider1"></div>
<div class="partialOutput" id="partial1" data-parlossval="50">50%</div>

然后我的jquery：

$( ".sliderVal" ).slider({
    value: parseInt(".partialOutput").data("parlossval")),
        min: 0,
        max: 100,
        step: 1,

但这并不是任何滑块都有的，我尝试使用下面的“$（this）”对象，但是当我运行它时，滑块会消失：

$( ".sliderVal" ).slider({
        value: parseInt($(this).(".partialOutput").data("parlossval")),
        min: 0,
        max: 100,
        step: 1,

提前致谢....

Answer 1

使用create event设置值：

$(".sliderVal").slider({
    min: 0,
    max: 100,
    step: 1,
    create: function( event, ui ) {
        $(this).slider('value',$(this).next().data('parlossval'));
    }
})

<强> jsFiddle example

Answer 2

在jQuery选择器中使用id而不是类。这将获得特定的HTML元素，而不是该类的每个元素。

尝试

$( "#slider1" ).slider({
    value: parseInt("#partial1").data("parlossval")),
    min: 0,
    max: 100,
    step: 1,
});

然后对于mutliple滑块，只需为每个滑块div创建一个滑块。

$( "#slider2" ).slider({
    value: parseInt("#partial2").data("parlossval")),
    min: 0,
    max: 100,
    step: 1,
});

多个jquery滑块加载保存的值

2 个答案: