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

Posted 2023-03-13

【中文标题】使用参数时代码无法按预期工作

【英文标题】：Code doesn't work as expected when using parameters

【发布时间】：2015-11-29 22:52:49

【问题描述】：

我有一个使用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() 的函数中有参数，我如何才能使上面的代码工作？此外，如果您有更好的方法来实现相同的目标，并使用更好的代码，那么也请发布。

【参考方案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 广告更新了小提琴

【讨论】：

附注为了优化您的代码性能，您应该考虑不要将元素附加到 DOM 到 for 循环中。您可以使用 [documentFragment] (developer.mozilla.org/en-US/docs/Web/API/DocumentFragment) 或简单地将文本 var 中的所有 div 连接到循环中，并在循环结束时将其附加到 DOM。

我在 if 语句中收到来自 JSLint 的警告说 '$labels' is already defined.

对不起，给我 5 分钟，我解决它

当然！没问题！另外，当我实例化el 的变量时，如何使它成为多行？意思是，我希望每个 div 都有自己的行。

你的意思是这样的吗？ ***.com/questions/1589234/…