带有字母的 jQuery UI 范围滑块答案

【问题标题】：jQuery UI range slider with letters带有字母的 jQuery UI 范围滑块
【发布时间】：2015-03-02 13:47:05
【问题描述】：

我有一个 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 ) );
});

但是现在我需要第二个，但这次我需要它来处理字母而不是整数。因此，我需要最小值：'A' 和最大值：'Z'，因此范围是字母表中的 2 个字母。但我一直找不到除整数或滑块之外的任何东西。任何帮助表示赞赏 - 请记住我已经做了很多网络开发，但对 jQuery 来说还是很新的。

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-slider

【解决方案1】：

您可以使用min 和max 值，它们分别相当于A 和Z 的ASCII 键码，然后在slide 事件中使用String.fromCharCode() 来显示它们。试试这个：

$("#slider").slider({
  min: 65,
  max: 90,
  slide: function(event, ui) {
    $('#display').text(String.fromCharCode(ui.value));
  }
});

body {
  margin: 20px;
}

#display {
  margin: 20px 0 0;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/black-tie/jquery-ui.css" />
<div id="slider"></div>
<div id="display"></div>

或者，如果您需要发送到服务器的值介于 1 和 26 之间，您可以修改 slide 函数中的 ASCII 码：

$("#slider").slider({
    min: 1,
    max: 26,
    slide: function( event, ui ) {
        $('#display').text(String.fromCharCode(ui.value + 64));
    }
});

【讨论】：

【解决方案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]);
  }
 });

【讨论】：

不敢相信我没有想到这个简单的解决方案。虽然我认为我更喜欢下面的 ASCII 码，因为它避免了每次都创建一个字母数组 - 但很好的解决方法都是一样的

【解决方案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

【讨论】：