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获得的是，用户在 $（＆＃39;输入#input_val＆＃39;）中输入数字后点击 $（＆＃39;按钮） #check＆＃39;）函数返回给定范围内的值。

例如，如果用户输入数字3，则函数将返回＆＃34; 10＆＃34 ;;

例如，如果用户输入数字8，则函数将返回＆＃34; 16＆＃34;等

该列表应该是动态的，这意味着我们不知道有多少$（＆＃39; div.number_group＆＃39;）。

Answer 1

迭代sagas.js并根据最小值和最大值

找出值

.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);
});

Answer 2

作为已接受答案的替代方法，您可以在数组中缓存min，max和value。这样可以避免在每次点击时搜索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;
}

来自一个范围的Jquery获得一个值，从其他范围获得第二个值，从其他范围获得第三个值等

2 个答案: