通过初始化获取句柄位置

Question

我有以下 fiddle： http://jsfiddle.net/rojq0yun/

效果很好，#min div 的位置将在移动滑块时正确更新。

虽然我尝试在使用默认值初始化滑块时获得正确的位置。目前手柄位置正确但#min div 不正确。我试着查看 ui.handle 属性但它似乎绑定到幻灯片事件：

$('#min').html(periods[ui.value])
         .position({
                          my: 'center top',
                          at: 'center bottom',
                          of: ui.handle,
                          collision: 'fit none'
                      });

这个可以查询句柄的位置吗？

编辑：我使用 $(this).find('.ui-slider-handle:first'); 查询句柄对象，然后将其用作 position 的 of 属性。当运行它并检查 div 的“左”属性时，我得到 199.4px。来回移动手柄到原来的位置再检查，左边的属性就是210px。差异总是 10.6px。

这种差异从何而来？

已更新 fiddle 此处：http://jsfiddle.net/f4u1mphr/

Answer 1

考虑以下因素。

https://jsfiddle.net/Twisty/2djtpakb/11/

JavaScript

$(function() {

  var periods = ["2022-01", "2022-02", "2022-03", "2022-04", "2022-05", "2022-06", "2022-07"];
  var defaultValue = 3;

  function setMin(cnt, pos) {
    $('#min')
      .html(cnt)
      .position(pos);
  }

  $("#slider").slider({
    range: "max",
    min: 0,
    max: periods.length - 1,
    step: 1,
    value: defaultValue,
    slide: function(event, ui) {
      // wait for the ui.handle to set its position
      setTimeout(function() {
        setMin(periods[ui.value], {
          my: 'center top',
          at: 'center bottom',
          of: ui.handle,
          collision: 'fit none'
        });
      }, 1);
    }
  });

  setMin(periods[defaultValue], {
    my: 'center top',
    at: 'center bottom',
    of: $("#slider .ui-slider-handle")
  });
});

只是稍微清理了一下，将值的处理移到了一个函数中以便于赋值。

通过初始化获取句柄位置

get handle position by the initialization

jquery-ui

slider