Question

我有一个jQuery UI Range滑块，如下所示工作正常（几乎是jQuery API示例的复制和粘贴：

//Price range slider
$(function() {
    $( "#slider-range-price" ).slider({
        range: true,
        min: 300,
        max: 18499,
        values: [300,18499],
        slide: function( event, ui ) {
            $( "#amount-price" ).val( "£" + ui.values[ 0 ] + " - £" + ui.values[ 1 ] );
        }
    });
    $( "#amount-price" ).val( "£" + $( "#slider-range-price" ).slider( "values", 0 ) +
    " - £" + $( "#slider-range-price" ).slider( "values", 1 ) );
});

然而现在我需要第二个，但这次我需要它来处理字母而不是整数。因此我需要min：'A'和max：'Z'，因此范围是字母表的2个字母。但我一直无法找到除滑块之外的整数或浮点数。任何帮助表示赞赏 - 记住我已经做了很多web-dev，但我对jQuery很新。

Answer 1

您可以分别使用等同于min和max的ASCII密钥代码的A和Z值，然后在{{1}中使用String.fromCharCode()要显示它们的事件。试试这个：

slide

Example fiddle

或者，如果您需要将发送到服务器的值放在$("#slider").slider({ min: 65, // = A max: 90, // = Z slide: function( event, ui ) { $('#display').text(String.fromCharCode(ui.value)); } });和1之间，则可以修改26 func中的ASCII代码：

slide

Answer 2

我建议使用一个数组，将整数值映射到字母表中的字母。

var alph = ["A", "B", "C", ..., "Z"];

因此用户范围介于0到25之间。然后显示数组中与所选整数对应的字母。例如：alph[2] // C

var alph = ["A", "B", "C", ..., "Z"];
$("#slider").slider({
  min: 0, // A
  max: 25, // Z
  slide: function( event, ui ) {
    $('#display').text(alph[ui.value]);
  }
 });

Answer 3

已经有两个好的解决方案了，这里有第三个替代方案：使用基数为36的Number.toString()，并将最小值和最大值限制在A和Z之间：

$( "#slider-range-price" ).slider({
    range: true,
    min: 10,
    max: 35,
    values: [ 20, 26 ],
    slide: function( event, ui ) {
        $( "#amount-price" ).val( ui.values[ 0 ].toString(36) + " - " +
                                  ui.values[ 1 ].toString(36) );
    }
});

Here's a fiddle link

带有字母的jQuery UI范围滑块

3 个答案: