我正在使用JQuery UI范圍滑塊。我有自定義的css，我寫了一些JS，讓我的范圍從89到98，并在滑塊的手柄上顯示新值。如果我把左邊的手柄移到91，我想在左邊的手柄上設定 "91 "的文字。同樣的，右邊的手柄也是如此。
問題是，最初的文本值不在正確的位置，當我移動其中一個手柄時，另一個手柄的值就會消失。
下面是代碼
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script。
src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"/span>
integrity="sha256-T0Vest3yCU7pafRw9r settMBX6JkKN06dqBnpQ8d30="/span>
crossorigin="anonymous"></script>
<style>/span>
.ui-slider {
height: 5px;
width: 205px;
position: relative;
border: none;
background: #F5A000;
margin-left: 20px;
margin: 100px;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
background: #3A3A3A;
/* border-radius: 25px;*/.
outline: none;
border: 1px solid #3A3A;
position: absolute;
margin-left: -5px;
top: -7px;
width: 4px;
height: 15px;
border-radius: 0;
}
.ui-slider-horizontal .ui-slider-range {
background: #F5A000;
}
#labelHolder {
height: 7px;
position: relative;
border: none;
}
#min,
#max {
position: absolute;
margin-left: -.6em;
text-align: center;
font-family: Lato, sans serif;
字體大小: 15px;
font-weight: 600;
color: #3A3A3A。
}
</style>/span>
<div id="labelHolder"/span>>
<div id="min"> </div>>
<div id="max"/span>> </div>>
</div>/span>
<div id="slider"/span>> </div>
<script>
$("#slider"/span>).slider({
range: true,
min: 89,
max: 98,
step: 1,
values: [89, 98] 。
slide: function(event, ui) {
if ((ui.values[1] - ui. values[0]) < 1) {
return false。
}
var delay = function（） {
var handleIndex = $（ui.handle）.data（'index.uiSliderHandle'）。
var label = handleIndex == 0 ? '#min'/span> : '#max'/span>;
$(label).html（ui.value）.position（{
my: 'center top',
at: 'center bottom',
of: ui.handle。
offset: "0, 10"。
});
};
//等待ui.handle設定其位置。
setTimeout(delay, 5) 。
}
});
$('#min').html($('#slider')。 slider('values', 0).position（{
my: 'center top'。
at: 'center bottom',
of: $（'#slider a:eq(0)'）。
offset: "0, 10"。
});
$('#max').html($('#slider')。 slider('values', 1).position（{
my: 'center top'。
at: 'center bottom',
of: $（'#slider a:eq(1)'）。
offset: "0, 10"。
});
</script>
有什么想法嗎？
uj5u.com熱心網友回復：
你可以使用each回圈來迭代你的span標簽，這個標簽在slider里面。然后，使用index值，這將是0,1得到你的handler的值，即：ui.values[index] 然后使用$（this）來得到當前被迭代的span，并把它傳遞給你的位置。
演示代碼 :
。$(document). ready(function() {
$("#slider"/span>).slider({
range: true,
min: 89,
max: 98,
step: 1,
values: [89, 98] 。
slide: function(event, ui) {
if ((ui.values[1] - ui. values[0]) < 1) {
return false。
}
var delay = function（） {
//loop through the span...
$("#slider").find(".ui-slider-handle") 。 each(function(index) {
var label = index == 0 ? '#min' : '#max'; //change selector
//assign value; //assign value
$(label).html(ui.values[index]).position（{
my: 'center top',
at: 'center bottom',
of: $(this), // current span which is iterated.
offset。"0, 10"。
});
});
};
//等待ui.handle設定其位置。
setTimeout(delay, 5) 。
}
});
$('#min').html($('#slider')。 slider('values', 0).position（{
my: 'center top'。
at: 'center bottom',
of: $('#slider .ui-slider-handle:eq(0)'/span>),
offset: "0, 10"。
});
$('#max').html($('#slider')。 slider('values', 1).position（{
my: 'center top'。
at: 'center bottom',
of: $('#slider .ui-slider-handle:eq(1)'),
offset: "0, 10"。
});
}).ui-slider {
height: 5px;
width: 205px;
position: relative;
border: none;
background: #F5A000;
margin-left: 20px;
margin: 100px;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
background: #3A3A3A;
/* border-radius: 25px;*/.
outline: none;
border: 1px solid #3A3A;
position: absolute;
margin-left: -5px;
top: -7px;
width: 4px;
height: 15px;
border-radius: 0;
}
.ui-slider-horizontal .ui-slider-range {
background: #F5A000;
}
#labelHolder {
height: 7px;
position: relative;
border: none;
}
#min,
#max {
position: absolute;
margin-left: -.6em;
text-align: center;
font-family: Lato, sans serif;
字體大小: 15px;
font-weight: 600;
color: #3A3A3A;
}<script src="https://ajax. googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">< /script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui. js" integrity="sha256- T0Vest3yCU7pafRw9r settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"/span>> </script>>
<div id="labelHolder"/span>>
<div id="min"/span>> </div>>
<div id="max"/span>> </div>>
</div>/span>
<div id="slider"/span>> </div> 轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/319916.html
標籤：