使用“更改事件”将多个输入保持在所需范围内

Question

我正在创建一个表单，允许用户设置用于测试模板的分级等级。此表单为A、B、C、D、F输入了一个数字，我试图使用javascript (jquery)将每个数字保持在适当的顺序。

在中，我更改为html输入，这样我就可以很容易地使用js小提琴，这个部分应该不会影响。

不过，我到目前为止所做的工作，仍有可能将一个高于或低于设定值的数值送交另一个职系。我想要的是增加另一个等级的字母值，以不允许这种重叠。如果你需要更多的澄清，请告诉我。

下面是输入的html：

  <div class="form-group" style="width:500px;">
      @Html.LabelFor(a => a.GradeScale, "Enter the number values for the grade scale")
      <div>
        <span class="large-text">A</span> @Html.TextBox("ARange", 100, "", new { @id = "aRange", @type = "number", @class = "thin-column", @max = 100, @min = 4 })
        to <span id="aLowRange">94</span>
      </div>
      <div>
        <span class="large-text">B</span> @Html.TextBox("BRange", 93, "", new { @id = "bRange", @type = "number", @class = "thin-column", @max = 99, @min = 3 })
        to <span id="bLowRange">85</span>
      </div>
      <span class="large-text">C</span> @Html.TextBox("CRange", 84, "", new { @id = "cRange", @type = "number", @class = "thin-column", @max = 98, @min = 2 })
        to <span id="cLowRange">77</span>
      <div>
        <span class="large-text">D</span> @Html.TextBox("DRange", 76, "", new { @id = "dRange", @type = "number", @class = "thin-column", @max = 97, @min = 1 })
        to <span id="dLowRange">70</span>
      </div>
      <div>
        <span class="large-text">F</span> @Html.TextBox("FRange", 69, "", new { @id = "fRange", @type = "number", @class = "thin-column", @max = 96, @min = 0 })
        to <span id="fLowRange">0</span>
      </div>
    </div>

以下是我编写的javascript：

$(function () {
  $('#aRange,#bRange,#cRange,#dRange,#fRange').on('change', function () {

var aLowRange = parseInt($('#bRange').val()) + 1;
$('#aLowRange').text(aLowRange);

var bLowRange = parseInt($('#cRange').val()) + 1;
$('#bLowRange').text(bLowRange);

var cLowRange = parseInt($('#dRange').val()) + 1;
$('#cLowRange').text(cLowRange);

var dLowRange = parseInt($('#fRange').val()) + 1;
$('#dLowRange').text(dLowRange);

//check to see if the low val is higher than the high val then correct
$('#bRange').val() >= parseInt($('#bLowRange').val()) ? $('#bLowRange').text(parseInt($('#bLowRange').val()) + 1) : "";
$('#cRange').val() >= parseInt($('#cLowRange').val()) ? $('#cLowRange').text(parseInt($('#cLowRange').val()) + 1) : "";
$('#dRange').val() >= parseInt($('#dLowRange').val()) ? $('#dLowRange').text(parseInt($('#dLowRange').val()) + 1) : "";
$('#fRange').val() >= parseInt($('#fLowRange').val()) ? $('#fLowRange').text(parseInt($('#fLowRange').val()) + 1) : "";

});
});

这是一把小提琴，展示了我迄今为止的行动。我愿意接受javascript或jquery的帮助：

https://jsfiddle.net/jacobrutter/nub2gsoL/

我不需要一个完整的解决方案，如果你能给我指明正确的方向，我会用它来解决。，谢谢！

Answer 1

这里有一个指向jsfiddle解决方案的链接：

https://jsfiddle.net/cmurk0zh/

帮助者职能：

function findIndex(value, array) {
    for(var i = 0; i < array.length; i++) {
    if (array[i].letter === value) {
        return i;
    }
  }
}

var gradeValues = [
  {
    letter: 'a',
    max: 100,
    min: 94
  },
  {
    letter: 'b',
    max: 100,
    min: 94
  },
  {
    letter: 'c',
    max: 100,
    min: 94
  },
  {
    letter: 'd',
    max: 100,
    min: 94
  },
  {
    letter: 'f',
    max: 100,
    min: 94
  },

];

function setMaxInputValue(thisGrade) {
      $('#' + thisGrade.letter + 'Range').val(thisGrade.max);
}
function setMinLabelText(thisGrade) {
      $('#' + thisGrade.letter + 'LowRange').text(thisGrade.min);
}

关于变革：

$(function () {
  //when an input val changes, adjust the low range appropriately
  $('#aRange,#bRange,#cRange,#dRange,#fRange').on('change', function (event) {

    var changedValueId = event.currentTarget.id;
    var startIndex = findIndex(changedValueId[0], gradeValues);

    // get values
    for (var i = 0; i < gradeValues.length; i++ ) {
        gradeValues[i].max = parseInt($('#' + gradeValues[i].letter + 'Range').val());
      gradeValues[i].min = $('#' + gradeValues[i].letter + 'LowRange').text();
    }

    // Correct same
    var thisGrade = gradeValues[startIndex];
    if (thisGrade.min >= thisGrade.max) {
        thisGrade.min = thisGrade.max - 1;
      setMaxInputValue(thisGrade);
      setMinLabelText(thisGrade);
    }
    // correct above
    for (var i = startIndex; i > 0; i--) {
        var previousGradeValue = gradeValues[i-1];
        previousGradeValue.min = gradeValues[i].max + 1;
      setMinLabelText(previousGradeValue);
      if (previousGradeValue.max <= previousGradeValue.min) {
        previousGradeValue.max = previousGradeValue.min + 1;
        setMaxInputValue(previousGradeValue);
      }
    }

    // correct below
        for (var i = startIndex; i < gradeValues.length - 1; i++) {
        var nextGradeValue = gradeValues[i+1];
        nextGradeValue.max = gradeValues[i].min - 1;
      setMaxInputValue(nextGradeValue);
      if (nextGradeValue.max <= nextGradeValue.min) {
        nextGradeValue.min = nextGradeValue.max - 1;
        setMinLabelText(nextGradeValue);
      }
    }

    });
});

我将其中一些变量参数化，以便可以迭代。这个解决方案的主要特点是，它找到了被更改的值，并修改了上面和下面的值。

此解决方案在开始值和结束值时不具有完全绑定检查。

Answer 2

这里是我放在一起的javascript，它解决了我的用例，但不是很枯燥。我想我会用它，稍后再圈回来重构。

$(function () {
//when an input val changes, adjust the low range appropriately
$('#aRange,#bRange,#cRange,#dRange,#fRange').on('change', function () {

var aRange = parseInt($('#aRange').val());
var bRange = parseInt($('#bRange').val());
var cRange = parseInt($('#cRange').val());
var dRange = parseInt($('#dRange').val());
var fRange = parseInt($('#fRange').val());

var aLowRange = parseInt($('#bRange').val()) + 1;
$('#aLowRange').text(aLowRange);

var bLowRange = parseInt($('#cRange').val()) + 1;
$('#bLowRange').text(bLowRange);

var cLowRange = parseInt($('#dRange').val()) + 1;
$('#cLowRange').text(cLowRange);

var dLowRange = parseInt($('#fRange').val()) + 1;
$('#dLowRange').text(dLowRange);

//check to see one grade value crosses another then correct
  var rangeArray = [aRange, bRange, cRange, dRange, fRange];
var nameArray = ['aRange', 'bRange', 'cRange', 'dRange', 'fRange'];
var lowNameArray = ['aLowRange', 'bLowRange', 'cLowRange', 'dLowRange', 'fLowRange'];

  for (var i = 0; i < rangeArray.length; i++) {
    if (rangeArray[i] <= rangeArray[i + 1]) {

       rangeArray[i + 1] -= 1;
       $('#' + nameArray[i + 1]).val(rangeArray[i + 1]);
       var lowRange = parseInt($('#' + nameArray[i + 1]).val()) + 1;
       $('#' + lowNameArray[i]).text(lowRange);
     }
   }
 });
});

谢谢你花点时间和我讨论这个问题，它帮助我以不同的方式思考这个问题。(我对改进持开放态度，如果你确实改进了，我很乐意把你的改进标记为答案。)