当一个输入范围滑块值小于另一个(使用jQuery)时做一些事情

Question

我正在尝试使用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 */ });

Answer 1

首先，尝试引用maxdistance时会出错。"$maxdistance"应该是"#maxdistance">

我改变了一些其他的东西

• 将滑块放置在div中，并更改这些div的bgcolor而不是滑块本身
• 每次事件发生时重置bg颜色
• 使用on change事件代替blur(不必要)
• 删除.val()。长度和使用。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)' });
} 
});