Ползунок пользовательского интерфейса jQuery: значение по умолчанию не отображается

Question

Мой слайдер jQuery UI работает хорошо.Единственная проблема заключается в том, что когда я загружаю страницу, она не показывает никакого значения по умолчанию (оно должно быть 30), ни на слайдере (#slider), ни в тексте (#sliderdays).

В настоящее время по умолчанию ползунок имеет максимальное значение (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

Фактические значения вашего слайдера - от нуля до шести. Вы берете это значение и используете его как индекс вашего массива, чтобы получить значения в нем, 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) и получаем соответствующий элемент массива.