Question

我有一个滑块的问题，它会在拖动时给我它的常数值。

我的 html 代码如下：

<div class="dimmer">
      <div class="intensity-slider">
        <!--<label for="fader">INTENSITY</label>-->
        <input type="range" min="0" max="100" value="80" class="vertical" orient="vertical" id="fader" step="1" oninput="outputUpdate(value)">
        <output class="output" for="fader" id="intensity">80</output>
        <script>

          function outputUpdate(int) {
          document.querySelector('#intensity').value = int;
          }
        </script>
      </div>
      <div class="blackout">
        <a ontouchstart="" href="#" id="blackout">BO</a>
      </div>
  </div>

现在，我有输出类强度，当我拖动滑块时它会更新。

我现在还需要为我的jQuery consolelog更新此值。

这是我的 JavaScript 代码：

$( "#fader" ).mousedown(function(value) {
    console.log(document.querySelector('#intensity').value);
});

控制台正确记录值，但不是在整个拖动过程中获取流，而是在按下它时获取值。

如何解决这个问题？

Answer 1

使用此代码，我相信您将实现您的目标：

$('#fader').change(function(event) {
    console.log(document.querySelector('#intensity').value);
});

滑动在滑动时为您提供值。在滑动上，它会触发change事件。

<强>更新

您可以使用on('slide')方法在滑动时了解每个点的值。

$('#fader').on('slide', function(event, ui) {
    console.log(ui.value);
});

以下是on('slide')事件的一些细节：

slide( event, ui )

在幻灯片播放期间每次鼠标移动时触发。事件中提供的值ui.value表示句柄将由于当前移动而具有的值。取消事件将阻止句柄移动，句柄将继续具有其先前的值。

请参阅此JSFiddle了解详情。

Jquery在更改时获取滑块值

1 个答案: