在单击滑块轨道时获取Jquery-UI滑块值？

Question

我试图在单击滑块轨道时获取jquery-ui滑块的值。但是我无法获得滑块的值。我可以在幻灯片上获得价值，但在点击时无法获得它。

  <div id="slider"></div>

  var handlers = [25, 50, 75];

  $('#slider').on('click',function(e) {
    //code to get the value
  });

  /*While sliding I'm getting the value*/
   $("#slider").slider({
        min:0,
        max:100,
        steps:20,
        values: handlers,
        slide: function (evt, ui) {
         console.log(ui.values);
        }
    });

Answer 1

欢迎使用堆栈溢出。 jQuery UI Slider添加了许多元素，因此您必须减少歧义。如果查看渲染的DIV即#slider，您将看到它的高度基本上为0。因此，当用户单击手柄或工具栏时，单击事件可能不会冒泡到#slider元素。

请考虑以下代码：

$(function() {
  function log(str) {
    $("#log").prepend("<p>" + str + "</p>");
  }
  var handlers = [25, 50, 75];

  /*While sliding I'm getting the value*/
  $("#slider").slider({
    min: 0,
    max: 100,
    steps: 20,
    values: handlers,
    slide: function(evt, ui) {
      log("Slide: " + ui.values.join(","));
      $(".ui-slider-handle", this).each(function(i, el) {
        $(el).html(ui.values[i]);
      });
    }
  }).on("click", ".ui-slider-handle", function(e) {
    log("Click: " + $(e.target).parent().slider("values").join(","));
  });
});

#log {
  width: 100%;
  height: 7em;
  font-size: 65%;
  overflow: auto;
}

<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>

<div class="content">
  <div id="slider" class="ui-helper-clearfix"></div>
</div>
<div id="log" class="ui-widget"></div>

在日志中，您可以同时看到Click和Slide活动。如果您想更详细地了解何时应触发回调，则可以考虑使用mousedown或mouseup事件。