Question

我正在使用JQM 1.4.5范围滑块，我想直接从数组中获取我的值/步骤... 我无法找到任何可行的方法......

我的阵列

var myArray = [ "0", "1", "6", "a", "F", "5B", "2x" ];

我的滑块

<input class="ui-hidden-accessible" type="range" name="rangeInput" id="rangeInput" value="0" data-show-value="true"/>

更新

我知道这可以用jquery.ui滑块完成，但我在移动应用中使用它，我想避免添加UI ...

使用UI的工作示例

＆＃13;

var sizes = ["0", "1", "6", "a", "F", "5B", "2x"];

$("#slider").slider({
  min: 0,
  max: 7,
  slide: function(event, ui) {
      $(".rsize").text(sizes[ui.value]);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css" rel="stylesheet"/>
<div class="demo">

<div id="slider"></div>

    <div class='rsize'></div>
</div>

＆＃13;

Answer 1

jQuery Mobile的滑块小部件不提供slide事件。相反，change事件可用于使用数组中的自定义值更新句柄的 text 。

首先，根据自定义数组数组的max更新滑块的length属性，然后更改句柄的文本。

var custom = ["0", "1", "6", "a", "F", "5B", "2x"];

$("#rangeInput").prop({
    max: custom.length - 1
}).closest(".ui-slider")
    .find(".ui-slider-handle")
    .text(custom[0]);

然后，根据检索到的 true value 收听change事件，读取您的数组并获取自定义值。

$("#rangeInput").on("change", function () {
    var value = $(this).val(),
        button = $(this)
            .closest(".ui-slider")
            .find(".ui-slider-handle");
    setTimeout(function () { /* update text after jQM refreshes slider */
        button.text(custom[value]);
    }, 0);
});

现在真值是一个数字;将其视为数组的自定义值的索引。

var true_val = $("#rangeInput").val(),
    custom_value = custom[true_val];

<强> Demo

从数组中获取范围滑块值

1 个答案: