Не могу установить слайдер вручную - PullRequest
Новая
       51

Не могу установить слайдер вручную

0 голосов
/ 10 марта 2019

Я пытаюсь переместить ползунок в заданное положение, но также активировать функцию вместо console.log. но ничего не возвращает, пока ползунок не будет перемещен

JavaScript: 

        $(document).ready(function(){   
        $( function() {
            $("#CPU_GHz").slider({
                range: "min",
                value: 0,
                min: 0,
                max: 10,
                step: 0.1,
            slide: function( event, ui ) {
                $( "#amount_GHz" ).val( "Faster Than: " + ui.value + " GHz" ) ;

            }, 
            change: function(event, ui ) {
                CPU_GHz = ui.value;
                console.log(CPU_GHz);
            }
        });
        $( "#amount_GHz" ).val( "Faster Than: " + $( "#CPU_GHz").slider( "value" ) + " GHz");

      });


            $('#CPU_GHz').val('5').change()
        });

HTML: 

<p>  
          <input type="text" id="amount_GHz" readonly style="border:0; color:#2c85c5; font-weight:bold;">
        </p>

        <div id="CPU_GHz"></div>

Ответы [ 2 ]

1 голос
/ 10 марта 2019

Я изменил значение при загрузке страницы с помощью этой строки: 

$("#CPU_GHz").slider('value',6);

Затем вы можете вывести результат со строкой, которую вы уже написали: 

$( "#amount_GHz" ).val( "Faster Than: " + $( "#CPU_GHz").slider( "value" ) + " GHz");

Смотрите эту скрипку 

$( function() {
  $("#CPU_GHz").slider({
    range: "min",
    value: 0,
    min: 0,
    max: 10,
    step: 0.1,
    slide: function( event, ui ) {
      $( "#amount_GHz" ).val( "Faster Than: " + ui.value + " GHz" ) ;

    }, 
    change: function(event, ui ) {
      CPU_GHz = ui.value;
      console.log(CPU_GHz);
    }
  });


    $("#CPU_GHz").slider('value',6);

  $( "#amount_GHz" ).val( "Faster Than: " + $( "#CPU_GHz").slider( "value" ) + " GHz");

});
0 голосов
/ 11 марта 2019

Кредит идет на: Инициирование события ползунка пользовательского интерфейса jQuery 

$(function() {
  var cpu = $("#CPU_GHz").slider({
    range: "min",
    value: 5,
    min: 0,
    max: 10,
    step: 0.1,
    slide: function(event, ui) {
      $("#amount_GHz").val("Faster Than: " + ui.value + " GHz");
    },
    change: function(event, ui) {
      CPU_GHz = ui.value;
      console.log(CPU_GHz);
    }
  });
  $("#amount_GHz").val("Faster Than: " + cpu.slider("value") + " GHz");
  cpu.slider('option', 'change')(null, {
    value: cpu.slider('value')
  });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>
  <input type="text" id="amount_GHz" readonly style="border:0; color:#2c85c5; font-weight:bold;">
</p>

<div id="CPU_GHz"></div>

Я пытался сделать несколько других вещей, но они не работали, как ожидалось. Я думал, что .trigger("change") может работать, но это не стандартное событие изменения. Поэтому я проверил http://api.jqueryui.com/slider/#event-change, а затем попытался .trigger("slidechange"). Это тоже не сработало.

Есть два способа сделать это. Если вы инициализируете ползунок с помощью value: 0, а затем установите значение позже, это вызовет change: 

cpu.slider("option", "value", 5.0);

Или, если у вас уже есть установленное значение, которое я бы посоветовал, вы также можете вручную запустить его примерно следующим образом: 

cpu.slider('option', 'change')(null, {
  value: cpu.slider('value')
});

Это вызов функции change и передача ей, в основном, event и ui. Этого достаточно, чтобы бежать. Поскольку в этом случае вы на самом деле не используете event, ничего не стоит отправлять. Но функция должна знать, каким будет новое значение, поэтому мы отправляем объект с этим.

Надеюсь, это поможет.

...