Question

我有一个用JQuery UI实现的UISlider。我想在显示数字的滑块下添加一个图例。我跟着this answer展示了如何实现它。

现在我正在尝试执行以下操作：如果数字彼此太靠近，则应隐藏其他所有数字，如果数字仍然太近，则应隐藏每3个数字，依此类推。

我终于实现了，但是当我尝试向checkvals()函数添加参数时，它不起作用。

以下是代码：

不工作：带参数
JSFiddle

function checkvals(sliderID) {

  var threshold = 25;

  var $labels = $(sliderID + ' .sliderLegendNum:visible');

  var l = $labels.length;

  var fst = $labels.eq(l - 2).width();
  var nxt = $labels.eq(l - 1).width();

  var first = $labels.eq(l - 2).offset().left + fst;
  var second = $labels.eq(l - 1).offset().left;

  var dist = (second - first) + (fst / 2) + (nxt / 2);

  if (dist <= threshold) {
    var $labels = $(sliderID + ' .sliderLegendNum:visible');
    var c = 0;
    $labels.each(function() {
      if (c++ % 2) {
        $(this).hide();
      }
    });
    checkvals();
  } else {
    return true;
  }
}

$("#slider").slider({
    value: 4,
    min: 1,
    max: 35,
    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);
    }

  });
checkvals('#slider');

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

工作：没有参数
JSFiddle

function checkvals() {

  var threshold = 25;

  var $labels = $('#slider .sliderLegendNum:visible');

  var l = $labels.length;

  var fst = $labels.eq(l - 2).width();
  var nxt = $labels.eq(l - 1).width();

  var first = $labels.eq(l - 2).offset().left + fst;
  var second = $labels.eq(l - 1).offset().left;

  var dist = (second - first) + (fst / 2) + (nxt / 2);

  if (dist <= threshold) {
    var $labels = $('#slider .sliderLegendNum:visible');
    var c = 0;
    $labels.each(function() {
      if (c++ % 2) {
        $(this).hide();
      }
    });
    checkvals();
  } else {
    return true;
  }
}

$("#slider").slider({
    value: 4,
    min: 1,
    max: 35,
    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);
    }

  });
checkvals();

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

即使我在checkvals()函数中有参数，如何才能使上面的代码正常工作？此外，如果您有更好的方法来实现同样的事情，使用更好的代码，那么请发布它。

Answer 1

您可以像这样修复代码：

function checkvals(selector) {

    var threshold = 25;

    var $labels = $(selector).find(".sliderLegendNum:visible");

    var l = $labels.length;
    var fst = $labels.eq(l - 2).width();
    var nxt = $labels.eq(l - 1).width();

    var first = $labels.eq(l - 2).offset().left + fst;
    var second = $labels.eq(l - 1).offset().left;

    var dist = (second - first) + (fst / 2) + (nxt / 2);

    if (dist <= threshold) {
        $labels = $(selector).find(".sliderLegendNum:visible");
        var c = 0;
        $labels.each(function () {
            if (c++ % 2) {
                $(this).hide();
            }
        });
        checkvals(selector);
    } else {
        return true;
    }
}

$("#slider").slider({
    value: 4,
    min: 1,
    max: 35,
    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);
    }

});
checkvals('#slider');

这是一个有效的fiddle

编辑：已修复以通过jsHint广告更新小提琴

使用参数时，代码无法按预期工作

1 个答案: