Question

我有一个用JQuery UI实现的UISlider。我想在显示数字的滑块下添加一个图例。我跟着this answer展示了如何实现它，然后将数字放在百分比值中。这样，当滑块大小发生变化时（例如浏览器调整大小），数字仍然在正确的位置。

效果很好，但是如果浏览器窗口很小，或者滑块有很多数字，那么图例编号就会彼此太靠近了。

问题：
如果他们是＆＃39; x＆＃39;如何删除号码？金额太近了。

以下是我尝试过的事情：

if (i !== 0) {
    var prevLegendNum_offsetLeft = $('#legendNum' + i).closest('.sliderLegend').find('.sliderLegendNum').offset().left

    var distance = $('#legendNum' + i).offset().left - prevLegendNum_offsetLeft;
    console.log(distance); // Logs: 0

    if (distance <= 35) {
        $('#legendNum' + i).remove();
    }
}

我必须使用prevLegendNum_offsetLeft而不仅仅是$('#legendNum' + (i - 1))进行整个操作的原因是，如果有3个数字小于彼此距离35，那么{@ 1}}后面的2个数字将被删除。然后它会尝试访问i，但那不会出现，所以它会返回错误。

当我运行上面的代码时，它会删除除第一个之外的所有数字。

JSFiddle

＆＃13;

$('#legendNum' + (i - 1)

＆＃13;

$("#slider").slider({
    value: 4,
    min: 1,
    max: 15,
    step: 1
  })
  .each(function() {
    var opt = $(this).data().uiSlider.options;
    var vals = opt.max - opt.min;

    for (var i = 0; i <= vals; i++) {
      var el = $('<div class="sliderLegend"><div class="sliderLegendMark">|</div><div class="sliderLegendNum" id="legendNum' + i + '">' + (i + 2) + '</div></div>').css('left', (i / vals * 100) + '%');
      $('#slider').append(el);

      if (i !== 0) {
        var prevLegendNum_offsetLeft = $('#legendNum' + i).closest('.sliderLegend').find('.sliderLegendNum').offset().left

        var distance = $('#legendNum' + i).offset().left - prevLegendNum_offsetLeft;
        console.log(distance);

        if (distance <= 35) {
          $('#legendNum' + i).remove();
        }
      }
    }

  });

＆＃13;

#slider > div {
  position: absolute;
  width: 20px;
  margin-left: -10px;
  text-align: center;
  margin-top: 20px;
}
/* below is not necessary, just for style */

#slider {
  width: 50%;
  margin: 2em auto;
}

＆＃13;

在UISlider下添加数字

JSFiddle

0 个答案: