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

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() 的函数中有一个参数，我怎样才能让上面的代码工作？另外，如果您有更好的方法来实现同样的事情，使用更好的代码，那么也请post。

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 广告更新 fiddle

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

Code doesn't work as expected when using parameters

javascript

jquery

jquery-ui

uislider