时间戳

首页 > 解决方案 > 当一个输入范围滑块值小于另一个时执行某些操作（使用 jQuery）

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

问题描述

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

标签： htmljquerycssinput

解决方案

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

我改变了一些其他的东西

  • 将您的滑块放在 div 中并更改这些 div 的 bgcolor 而不是滑块本身
  • 每次事件发生时重置背景颜色
  • 使用 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)' });
  } 
});

推荐阅读