Question

我正在尝试比较双输入范围滑块中的两个值。如果底部值等于或大于最高值，我想返回false。这是为了防止两个拇指重叠。

我使用.change来监听更改。然后我可以console.log＆amp;在更新后返回值。我已经包含了最后一点代码，希望能得到帮助。你可以在这里看到完整的工作版本：

https://fiddle.jshell.net/elliottjb7/fj9ot08v/

由于

$("input[type='range'][id='text_box_bottom_range']").change(function() {
  var bottom = $("input[type='range'][id='text_box_bottom_range']").val();
  console.log("bottom = " + bottom);
  return bottom;
});

$("input[type='range'][id='text_box_top_range']").change(function() {
  var top = $("input[type='range'][id='text_box_top_range']").val();
  console.log("top = " + top);
  return top;
});     

$("input").blur(function() {
  if ($("input[type='range'][id='text_box_bottom_range']").val() > this.val) {
    console.log("Bottom is higher than Top");
    return false;
  } else { 
  return true; 
  }
});

Answer 1

这一行

if ($("input[type='range'][id='text_box_bottom_range']").val() > this.val) {

应该是

if ($("input[type='range'][id='text_box_bottom_range']").val() > $("input[type='range'][id='text_box_top_range']").val()) {

Answer 2

将输入元素上的模糊事件更改为

$("input").blur(function() {
  if ($('#text_box_bottom_range').val() >= $('#text_box_top_range').val()) {
    console.log("bottom is equal or higher than the top");
    return false;
  } else { 
    return true; 
  }
});

Answer 3

$("#text_box_bottom_range").change(function() {
    return $(this).val();
});

$("#text_box_top_range").change(function() {
    return $(this).val();
});     

$("input").blur(function() {
    if ($("#text_box_bottom_range").val() =>  $("#text_box_top_range").val()) {
        return false;
    } else { 
        return true; 
    }
});

这是正确检查底部的位置：

... 等于或更高而不是最高值

此外，前两个函数（.change()）对于您要实现的目标而言是多余的，但我已经包含了更好的编写方法

使用Jquery比较两个输入值

3 个答案: