單擊滑塊軌道時獲取 Jquery-UI slider 值？

Question

我試圖通過點擊 slider 軌道來獲取 jquery-ui slider 的值。 但我無法獲得 slider 的值。 我能夠在幻燈片上獲得價值，但我無法通過點擊獲得它。

  <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(",")); } }).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事件。