来自HTML范围的if语句的间歇值

Question

我有一个if语句，有时返回正确的值，有时不返回正确的值。

可以使用以下代码段重现该问题：

要重现，请将滑块移动到各种值。 （请参见屏幕截图）

每次更改后，都会在表上添加新行。 请注意，有时结果为假。

为什么每次都不返回true？

$("#inputRange").change(function() {
  $("#slideValue").val(this.value);
  if (isValidRange(this.value)) {
    console.log("Yes");
  } else {
    console.log("No");
  }
});

function isValidRange(range) {
  // get min and max value of input range
  var sliderMin = $("#inputRange").attr("min");
  var sliderMax = $("#inputRange").attr("max");
  var bResult = false;

  if (range >= sliderMin) {
    if (range <= sliderMax) {
      bResult = true;
    } else {
      bResult = false;
    }
  } else {
    bResult = false;
  }

  //  build new table row
  var sRow = "<tr><td>" + sliderMin + "</td>";
  sRow += "<td>" + sliderMax + "</td>";
  sRow += "<td>" + range + "</td>";
  sRow += "<td>" + bResult + "</td></tr>";

  $("#tableData").append(sRow);

  return bResult;
}

.container {
  margin:15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">

  <div class="form-group">
    <label for="slideValue">Value</label>
    <input id="slideValue" type="input" class="form-control col-2" />
  </div>
  <div id="sampleDiv">
    <div class="form-group">
      <input id="inputRange" type="range" min="1" max="21" step="1" value="200" data-thumbwidth="20">
    </div>
  </div>

  <table id="tableData" border="1">
    <tr>
      <td>Min</td>
      <td>Max</td>
      <td>value</td>
      <td>result</td>
    </tr>
  </table>

</div>

Answer 1

代码中sliderMin和sliderMax的值被评估为string而不是int。即sliderMin == "1"和sliderMax == "21"。

因此，当输入值为"3"时，range <= sliderMax的结果为false，因为"3"大于"2"（"21"的第一个字符）。

要解决此问题，我将使用string将int转换为parseInt。

$("#inputRange").change(function() {
  $("#slideValue").val(this.value);
  if (isValidRange(parseInt(this.value))) { // parseInt here
    console.log("Yes");
  } else {
    console.log("No");
  }
});

function isValidRange(range) {
  // get min and max value of input range
  var sliderMin = parseInt($("#inputRange").attr("min")); // parseInt here
  var sliderMax = parseInt($("#inputRange").attr("max")); // parseInt here
  var bResult = false;

  if (range >= sliderMin) {
    if (range <= sliderMax) {
      bResult = true;
    } else {
      bResult = false;
    }
  } else {
    bResult = false;
  }

  //  build new table row
  var sRow = "<tr><td>" + sliderMin + "</td>";
  sRow += "<td>" + sliderMax + "</td>";
  sRow += "<td>" + range + "</td>";
  sRow += "<td>" + bResult + "</td></tr>";

  $("#tableData").append(sRow);

  return bResult;
}

.container {
  margin:15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">

  <div class="form-group">
    <label for="slideValue">Value</label>
    <input id="slideValue" type="input" class="form-control col-2" />
  </div>
  <div id="sampleDiv">
    <div class="form-group">
      <input id="inputRange" type="range" min="1" max="21" step="1" value="200" data-thumbwidth="20">
    </div>
  </div>

  <table id="tableData" border="1">
    <tr>
      <td>Min</td>
      <td>Max</td>
      <td>value</td>
      <td>result</td>
    </tr>
  </table>

</div>