javascript - Jquery 从一个范围获取一个值，从其他范围获取第二个值，从其他范围获取第三个值等

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') 中输入数字并点击 $('button#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>