多个 jquery 滑块加载保存的值答案

【问题标题】：multiple jquery sliders load saved value多个 jquery 滑块加载保存的值
【发布时间】：2013-10-09 15:57:39
【问题描述】：

我在一个页面上使用多个 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,

提前谢谢....

【问题讨论】：

在您的 jquery 中，您正在选择将获得所有 hte 滑块的类。试试$("#slider1").slider({.... 这只会选择slider1的id的滑块
@kierchon 我无法调用滑块的 ID，因为有多个滑块但只有一个滑块声明处理每个滑块的设置...
下面看我的回答

标签： jquery slider

【解决方案1】：

使用create event 设置值：

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

jsFiddle example

【讨论】：

【解决方案2】：

在 jQuery 选择器中使用 id 而不是类。这将获得特定的 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,
});

【讨论】：