[英]Code doesn't work as expected when using parameters
我有一个用JQuery UI
实现的UISlider。 我想在显示数字的滑块下添加图例。 我按照这个答案说明了如何实现。
现在,我尝试执行以下操作:如果数字彼此之间过于接近,则应隐藏其他每个数字;如果数字仍然过于紧密,则应隐藏每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()
函数中有一个参数,也如何使上面的代码工作? 另外,如果您有更好的方法来实现相同的目的,并且代码更好,那么也请发布该代码。
您可以这样修改代码:
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');
这是一个工作的小提琴
编辑:固定为通过jsHint广告更新了小提琴
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.