从一个范围获取一个值，从其他范围获取第二个值，从其他范围获取第三个值，依此类推

Question

请考虑以下代码示例：

.HTML

<div class="number_group">
    <span class="min">0</span> -
    <span class="max">5</span>:
    <span class="value">10</span>
</div>
<div class="number_group">
    <span class="min">6</span> -
    <span class="max">10</span>:
    <span class="value">16</span>
</div>
<div class="number_group">
    <span class="min">11</span> -
    <span class="max">15</span>;
    <span class="value">20</span>
</div>
<div class="number_group">
    <span class="min">16</span> -
    <span class="max">20</span>;
    <span class="value">22</span>
</div>
<label>
    <input type="number" id="input_val" min="0" max="20" />
    <button id="check" type="button">Check</button>
</label>

我想用jquery实现的是，在用户输入$（'input#input_val'）中的数字并单击$（'按钮#check'）函数返回给定范围内的值后。

例如，如果用户输入数字 3，函数将返回"10";

例如，如果用户输入数字 8，函数将返回"16"，依此类推

。

该列表应该是动态的，这意味着我们不知道给出了多少$（'div.number_group'）。

Answer 1

遍历.number_group并根据最小值和最大值找出值。

$('#check').click(function() {
  var res,
    // get the entered value  
    num = +$('#input_val').val();
  // iterate over the divs
  $('.number_group').each(function() {
    // check the value within min and max
    if (num >= +$('.min', this).text() && num <= +$('.max', this).text()) {
      // if within range set the result as its value
      res = +$('.value', this).text();
      // break the loop by returning false, since we are findout our value
      return false;
    }
  })
  console.log(res);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="number_group">
  <span class="min">0</span> -
  <span class="max">5</span>:
  <span class="value">10</span>
</div>
<div class="number_group">
  <span class="min">6</span> -
  <span class="max">10</span>:
  <span class="value">16</span>
</div>
<div class="number_group">
  <span class="min">11</span> -
  <span class="max">15</span>;
  <span class="value">20</span>
</div>
<div class="number_group">
  <span class="min">16</span> -
  <span class="max">20</span>;
  <span class="value">22</span>
</div>
<label>
  <input type="number" id="input_val" min="0" max="20" />
  <button id="check" type="button">Check</button>
</label>

Answer 2

作为接受答案的替代方法，您可以将最小值、最大值和值缓存在数组中。这将避免在每次单击时搜索 DOM。另一方面，div.numbergroups 在页面加载后必须是静态的。

var minMaxArr = [];
$(".number_group").each(function () {
    var minMax = {};
    $this = $(this);
    minMax['min'] = Number($this.children(".min").text());
    minMax['max'] = Number($this.children(".max").text());
    minMax['value'] = Number($this.children(".value").text());
    minMaxArr.push(minMax);
});
$("#check").on('click', function () {
    var inputVal = Number($("#input_val").val());
    var result = getValue(inputVal);
    console.log(result);
})
function getValue(inputVal) {
    for (var cnt = 0; cnt < minMaxArr.length; cnt++) {
        var minMax = minMaxArr[cnt];
        if (minMax.min <= inputVal && minMax.max >= inputVal) {
            return minMax.value;
        }
    }
    return undefined;
}