在 UISlider 下添加数字

Posted 2023-03-13

【中文标题】在 UISlider 下添加数字

【英文标题】：Add Numbers under UISlider

【发布时间】：2015-11-29 06:21:08

【问题描述】：

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

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

问题： 如果它们的“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，那么@ 后面就有2 个数字987654327@ 将被删除。然后它会尝试访问$('#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 = $('<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();
        
      
    

  );

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

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<div id="slider"></div>

【参考方案1】：

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

如果最近的前一个元素的右侧大于当前元素的左侧，那么你就知道它们重叠了，你可以移除你当前正在迭代的元素。

在下面的示例中，条件为left < prevRight + 6，因此存在6px 缓冲区。只需根据您希望数字之间的间距调整该数字即可。

Updated Example

$('#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%) 以使元素水平居中。

Updated Example

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

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

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

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

【讨论】：

感谢您的回答！但是在你的两个例子中，最后一个数字和它前面的数字之间的空间比其他所有数字都多。这是一张图片说明：i.imgur.com/rXMxTDG.png

@Jessica This 是我能想到的唯一解决方法，但是，有时会删除最后一个数字.. jsfiddle.net/yfs662d0