jquery - 多个 jquery 滑块加载保存的值

Question

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

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

上次保存值的 Jquery UI 滑块句柄

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

例如我的滑块代码：

<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 事件设置值：

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

jsFiddle 示例

Answer 2

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

尝试

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

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

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