单击滑块轨道时获取 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

欢迎来到 Stack Overflow。 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 事件。