3

我正在尝试找到一种修改来将“活动”类的各种滑块（noUiSliders）锁定在一起，这些滑块将被动态添加或删除。

如何修改脚本以使其一次仅锁定具有“活动”类的滑块，基于（或不）脚本作者页面上提供的方法？

以下示例仅锁定前两个滑块，而与“活动”类无关：

http://jsfiddle.net/qtzwyqke/8/

<div class="example">
    <div class="slider" id="slider1"></div> <span class="example-val" id="slider1-span"></span>

    <div class="slider active" id="slider2"></div>  <span class="example-val" id="slider2-span"></span>

    <div class="slider active" id="slider3"></div>  <span class="example-val" id="slider3-span"></span>

    <div class="slider active" id="slider4"></div>  <span class="example-val" id="slider4-span"></span>
    <button style="float:right;margin:20px 0 0">Lock</button>
</div>

<script>

var lockedState = false,
    values = [60, 80, 70, 50],
    slider1 = $("#slider1"),
    slider2 = $("#slider2"),
    slider3 = $("#slider3"),
    slider4 = $("#slider4");

$("button").click(function () {
    lockedState = !lockedState;
    $(this).text(lockedState ? 'unlock' : 'lock');
});

function crossUpdate(value, handle, slider) {

    if (!lockedState) return;

    var lValue = slider1.is(slider) ? 1 : 0,
        hValue = lValue ? 0 : 1;

    value -= (values[hValue] - values[lValue]);

    $(this).val(value);
}

slider1.noUiSlider({
    start: 60,

    animate: false,
    range: {
        min: 0,
        max: 100
    }
});

slider2.noUiSlider({
    start: 80,
    animate: false,
    range: {
        min: 0,
        max: 100
    }
});

slider3.noUiSlider({
    start: 70,
    animate: false,
    range: {
        min: 0,
        max: 100
    }
});

slider4.noUiSlider({
    start: 50,
    animate: false,
    range: {
        min: 0,
        max: 100
    }
});

$(".slider").on('set', function () {

    values = [
    Number(slider1.val()),
    Number(slider2.val()),
    Number(slider3.val()),
    Number(slider4.val())];
});

slider1.Link('lower').to(slider2, crossUpdate);
slider1.Link('lower').to($("#slider1-span"));

slider2.Link('lower').to(slider1, crossUpdate);
slider2.Link('lower').to($("#slider2-span"));

slider3.Link('lower').to($("#slider3-span"));
slider4.Link('lower').to($("#slider4-span"));

</script>
4

0 回答 0