在UISlider下添加数字

我有一个用JQuery UI实现的UISlider。 我想在显示数字的滑块下添加一个图例。 我按照这个答案展示了如何实现它，然后将数字放在百分比值上。 这种方式当滑块大小改变时（例如浏览器resize），数字仍然在正确的位置。

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

题：
如果数字“x”太近，我怎么能删除它？

这是我尝试做的事情：

 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彼此的距离，所以i后面的2个数字将被删除。 然后它将尝试访问$('#legendNum' + (i - 1) ，但这不会出现，因此它将返回错误。

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

的jsfiddle

 $("#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 = $('
|
' + (i + 2) + '
').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(); } } } }); 

 #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; } 

Answer 1

您可以迭代所有.sliderLegend元素（第一个除外），并将元素的左侧位置与最接近的前一个元素的右侧位置进行比较。

如果最接近的前一个元素的右侧大于当前元素的左侧，那么您知道它们重叠，并且您可以删除当前正在迭代的元素。

在下面的示例中，条件是left < prevRight + 6 ，因此有一个6px缓冲区。 只需根据数字之间的空间大小调整该数字即可。

更新的示例

 $('#slider .sliderLegend').slice(1).each(function() { var left = $(this).position().left, $prev = $(this).prevAll(':has(.sliderLegendNumber)').first(), prevRight = $prev.position().left + $prev.width(), $item = $(this).is(':last-child') ? $prev : $(this); if (left < prevRight + 6) { $item.find('.sliderLegendNumber').remove(); } }); 

此外，您遇到的部分问题是所有子div元素的固定宽度为20px 。 因此，您无法准确计算元素的偏移左侧位置，因为文本会溢出。 为了解决这个问题，我删除了固定宽度并添加了transform: translateX(-50%)以使元素水平居中。

更新的示例

 #slider > div { position: absolute; text-align: center; margin-top: 20px; transform: translateX(-50%); } 

1-50的范围现在将生成以下内容：

范围为1-100会产生以下结果：

此外，如果您还想删除这些行，请删除整个元素而不仅仅是数字：