j查询 UI 滑块从数据属性设置值

Question

嘿，我有几个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>

我想对它们运行一个 each 语句，以便它获取数据属性并使用它来设置滑块值。 我试过这个，但我似乎不太清楚如何让它工作。 它设置滑块，但值部分无法正常工作：

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

Answer 1

要使用 jQuery 的data()获取数据属性，您必须像 lpscore 一样以小写形式编写它。

这里对数据应用的规则进行了深入的解释 将数据属性与 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/