jQuery слайдер пользовательского интерфейса, установить значение из данных атрибутов

Эй, у меня есть несколько слайдеров jquery под названием "LP-slider", настроенных следующим образом: 

                 <div class="xs-col-12">
                        <div class="col-xs-2 label label-default">Grit</div>
                        <div class="col-xs-9">
                            <div class="lp-slider" data-lpScore="30"></div>
                        </div>
                        <div class="col-xs-1"><img class="slider-img" src="images/close-white.png"></div>
                        <br class="clear-fix">
                    </div>
                    <div class="xs-col-12 spacer-med">
                        <div class="col-xs-2 label label-default">Self-efficacy</div>
                        <div class="col-xs-9">
                            <div class="lp-slider" data-lpScore="30"></div>
                        </div>
                        <div class="col-xs-1"><img class="slider-img" src="images/close-white.png"></div>
                        <br class="clear-fix">
                    </div>
                    <div class="xs-col-12 spacer-med">
                        <div class="col-xs-2 label label-default">Sociability</div>
                        <div class="col-xs-9">
                            <div class="lp-slider" data-lpScore="30"></div>
                        </div>
                        <div class="col-xs-1"><img class="slider-img" src="images/close-white.png"></div>
                        <br class="clear-fix">
                    </div>

Я хотел бы запустить каждый оператор на них, чтобы он захватил атрибут данных и использовал его для установки значения ползунка. Я попробовал это и, кажется, не могу понять, как заставить его работать. Он устанавливает ползунок, но часть значения не работает правильно: 

$(".lp-slider").each(function() {
    var value = $(this).data("lpScore");
    $(this).slider({
        value:value,
        range:"min",
        min:1,
        max:100,
        step:1
    });
});
1 3
jquery jquery-ui-slider

1 ответ:

Для получения атрибута данных с помощью jQuery data() Вы должны написать его в нижнем регистре, как lpscore.

Здесь глубокое объяснение правил, применяемых data с использованием атрибутов данных с помощью jQuery

Код: 

$(".lp-slider").each(function () {
    var value = $(this).data("lpscore");
    $(this).slider({
        value: value,
        range: "min",
        min: 1,
        max: 100,
        step: 1
    });
});

Демо: http://jsfiddle.net/IrvinDominin/G3vy6/

6