Question

我的jQuery UI Slider运行良好。唯一的问题是，当我加载页面时，它不会在滑块（#slider）或文本（#sliderdays）上都没有显示任何默认值（应该为30）。

当前，默认情况下，滑块最大为（120），而#sliderdays为空（说“显示过去的日子”，没有任何数字）。

如何显示默认值？谢谢您的帮助！

这是代码：

<script>
$(function() {
         var valMap = [3, 7, 14, 30, 60, 90, 120];
         $("#slider").slider({
             max: valMap.length - 1,
             value: 30,
             slide: function(event, ui) {
               $("#sliderdays").text(valMap[ui.value]);
             }
         });
        $( "#sliderdays" ).val( "$" + $( "#slider" ).slider( "value" ) );
        });
 </script>

 <div id="slider"></div>
 <p>(Showing the past <span id="sliderdays"></span> days.)</p>

编辑：找到了解决方案

我做了两件事来解决这个问题：

1）我将value: 30更改为value: 3。 #slider现在可以工作了（因为30实际上是nr。3的值）。 2）我写了<span id="sliderdays">30</span>，现在#sliderdays已修复。

Answer 1

滑块的实际值为0到包括6的范围。您可以将该值用作数组的索引，以获取其中的值3、7、14、30、60、90和120。

$(function() {
  var valMap = [3, 7, 14, 30, 60, 90, 120];
  $("#slider").slider({
    max: valMap.length - 1,
    value: 3,
    slide: function(event, ui) {
      $("#sliderdays").text(valMap[ui.value]);
    }
  });
  $("#sliderdays").text( valMap[$("#slider").slider("value")]);
});

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

<div id="slider"></div>
<p>(Showing the past <span id="sliderdays"></span> days.)</p>

因此，您需要使用滑块的值来始终以该值作为索引来转换数组。例如，$("#sliderdays").text( valMap[$("#slider").slider("value")]);在这里我们使用滑块值（0-6）并获得相应的数组元素。

jQuery UI Slider：默认值未显示

1 个答案: