使用 on change 事件可将多个输入保持在所需范围内

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

感谢您抽出一点时间与我讨论，它帮助我以不同的方式思考问题。(我愿意改进，如果你确实改进了它，我很乐意将你的答案标记为答案。