Question

我试图将滑块移至设置位置，但还要在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>

Answer 1

我已更改此行上页面加载的值：

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

然后，您可以使用已经编写的行输出结果：

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

See this fiddle

$( 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");

});

Answer 2

贷方转到：Trigger a jQuery UI slider event

$(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初始化滑块，然后稍后设置Value，则将触发change：

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

或者，如果您已经设置了一个值（我建议您这样做），则也可以通过以下方式手动触发它：

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

这通常是在调用change函数并将event和ui传递给它。运行就足够了。由于在这种情况下您并没有真正使用event，因此什么也不发送。但是该函数需要知道新值将是sop，然后我们将其发送给Object。

希望有帮助。

手动倾斜设置滑块

2 个答案: