jquery - 是否可以使用 jquery mobile 按降序列出输入类型 ="range"值

Question

我正在尝试创建一种表单，根据您向右滑动还是向左滑动，值的权重有所不同。默认情况下，输入 type="range"按升序列出？你知道一种方法可以让类(class)有一个下降的过程吗？

这是一个 fiddle :https://jsfiddle.net/jacoblett/dzah8qv1/

<label for="slider-step">Ascending:<br/>
    0, 2, 4, <b>5</b>, 6, 8, 10
</label>
<input type="range" name="slider-step" id="slider-step" value="5" min="0" max="10" step="2" />

<label for="slider-step">How to get descending? <br/>
    10, 8, 6, <b>5</b>, 4, 2, 0
</label>
<input type="range" name="slider-step" id="slider-step" value="5" min="0" max="10" step="2" />

<link rel="stylesheet" href="//code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="//code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

Answer 1

这里有一个不使用 jQuery UI 的解决方案。

$(function() {
    var max = parseInt($("#slider-step2").attr("max"));
    $("#slider-step2").bind("change", function() {
        $("#slider-step2").val(max - parseInt($("#slider-step2").val()));
    });
});

https://jsfiddle.net/paska/dzah8qv1/1/

更新:为了能够重复使用它，您可以:

// For all .descendingSlider:
$(function() {
    $(".descendingSlider").bind("change", function() {
        var max = parseInt($(this).attr("max"));
        $(this).val(max - parseInt($(this).val()));
    });
});

或者更简洁的方式:

// A function and an "automatic creation" for the .descendingSlider:
$.fn.descendingSlider = function() {
    $(this).data("max", parseInt($(this).attr("max")));
    $(this).bind("change", function() {
        var max = $(this).data("max");
        $(this).val(max - parseInt($(this).val()));
    });
};

$(function() {
    $(".descendingSlider").descendingSlider();
});

https://jsfiddle.net/paska/dzah8qv1/2/