我正在嘗試使用 jQuery 設定兩個表單輸入范圍滑塊的背景顏色。用戶正在選擇最小和最大距離，因此我想在最小距離大于最大距離時提醒用戶。我已經使用 jQuery 嘗試過這個，但下面的腳本對我不起作用。
這是我的兩個輸入范圍滑塊：
<input id="mindistance" class="rangeslider" type="range" name="mindistance" min="0" max="100" value="0" step="5">
<input id="maxdistance" class="rangeslider" type="range" name="maxdistance" min="0" max="100" value="100" step="5">
這是我目前的 jQuery：
$('#maxdistance').blur(function(){
if ( $(this).val().length <= $('$mindistance').val().length ) {
$(this).css({ 'background-color': 'rgb(255,175,175)' });
$('#mindistance').css({ 'background-color': 'rgb(255,175,175)' });
} else {
$(this).css({ 'background-color': '' });
$('#mindistance').css({ 'background-color': '' });
}
});
我試過.focusout()的，而不是.blur()為好，所以我懷疑<=運營商不在這里作業，但我不知道。有人知道怎么做這個嗎？
編輯：既.val()與.val().length不這樣做的伎倆。
編輯：也試過 $(document).on('input', '#mindistance', function() { /* check values */ });
uj5u.com熱心網友回復：
首先，您在嘗試參考 maxdistnce 時出錯。'$maxdistance' 應該是 '#maxdistance'
我改變了一些其他的東西
- 將滑塊放在 div 中并更改這些 div 的 bgcolor 而不是滑塊本身
- 每次事件發生時重置背景顏色
- 使用 on change 事件而不是模糊（不是必需的）
- 洗掉 .val().length 并單獨使用 .val()
<div class="mindistance">
<label>min</label>
<input id="mindistance" class="rangeslider" type="range" name="mindistance" min="0" max="100" value="0" step="5">
</div>
<div class="maxdistance">
<label>max</label>
<input id="maxdistance" class="rangeslider" type="range" name="maxdistance" min="0" max="100" value="100" step="5">
</div>
$(document).on('change', '#mindistance',function(e){
console.log($(this).val(), $('#maxdistance').val());
$('.mindistance').css({ 'background-color': '' });
$('.maxdistance').css({ 'background-color': '' });
if ( $(this).val() <= $('#maxdistance').val() ) {
$('.mindistance').css({ 'background-color': 'rgb(255,175,175)' });
$('.maxdistance').css({ 'background-color': 'rgb(255,175,175)' });
}
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/339880.html