当一个输入范围滑块值小于另一个时执行某些操作（使用 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

首先，您在尝试引用 maxdistnce 时出错。 '$maxdistance' 应该是 '#maxdistance'

我改变了一些其他的东西

将您的滑块放在 div 中并更改这些 div 的背景色而不是滑块本身
每次事件发生时重置背景颜色
使用 on change 事件而不是 blur（不需要）
删除了 .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)' });
  } 
});

当一个输入范围滑块值小于另一个时执行某些操作（使用 jQuery）

Do something when one input range slider value is less than the other (using jQuery)

html

css

jquery

input

这是我的两个输入范围滑块：

这是我现在的jQuery：