我正在尝试为用户应用视觉提示，因为他们在表单字段中插入数据。红色表示输入无效，绿色表示内容有效。代码正在运行，尽管是以一种错误的方式。
»问题一：“红色状态”在任何事件中都会闪烁。
»问题二：如果手动在所有字段中逐个插入正确的（数字）输入，然后在最后一个字段中按退格键，以便当前输入字段为空字符串，总和将以NaN身份返回。
我怀疑这是由parseInt() JavaScript方法引起的，但我需要这样才能对推送到数组中的内容执行计算。
这种方式设置的具体原因是，因为在初始加载时，字段可能已经填充，如果是，我希望它显示所有绿色框和复选标记作为可视队列，该部分已经完成了。这也是整个代码块被包装在setInterval()中的原因，因此页面将始终扫描应显示的状态并相应地应用适当的类。
HTML：
<小时/> 员工信息（适用于所有办公室 位置）
</center>
</div><span class="mrQuestionText" style=""><br>
<br>
17. A. Indicate the TOTAL number of full time staff your firm has in the following
positions. DO NOT count a staff member in more than one position. (numeric values
only, no need for thousands separator)</span>
<table summary="<hr/><div style='border:1px solid #888;
background:#efefef;margin-top:1em;margin-left:2em;margin-right:2em;padding-top:5px;padding:1em;text-align:left; vertical-align:top; color:#000055;font-weight:normal;'><center><b>Staff Information (for all office locations)</b></center></div><br/><br/>17. A. Indicate the TOTAL number of full time staff your firm has in the following positions. DO NOT count a staff member in more than one position. (numeric values only, no need for thousands separator)<span class='sumcol'></span>" class="mrQuestionTable" style="display: inline-block;">
<tbody>
<tr>
<td id="Cell.0.0"></td>
<td id="Cell.1.0" class="mrGridQuestionText" style=""><span class="mrQuestionText" style=""><span style="clear:none; font-weight:bold; margin:0
auto; display:block; text-align:center;
width:280px;"> </span></span>
</td>
</tr>
<tr>
<td id="Cell.0.1" class="mrGridCategoryText" style=" text-Align: Left;
vertical-align: Middle; background-color: #D8D8D8; width: 430px; border-color:
black; border-width: 1px; border-left-style: Solid; border-right-style: Solid;
border-top-style: Solid; border-bottom-style: Solid;"><span class="mrQuestionText" style=" font-size: 10pt;">1. Principals/Partners</span>
</td>
<td id="Cell.1.1" style=" text-Align: Center; vertical-align: Middle;
background-color: #D8D8D8; width: auto; border-color: black; border-width:
1px; border-left-style: Solid; border-right-style: Solid; border-top-style:
Solid; border-bottom-style: Solid;">
<input type="text" name="_QP1_QGRQ17A_QPrincipals__Partners_QQ17A" id="_Q33_Q0_Q0" class="mrEdit" autocomplete="on" style="width: 215px; background-color: rgb(229, 242, 251);" maxlength="10" value="">
</td>
</tr>
<tr>
<td id="Cell.0.2" class="mrGridCategoryText" style=" text-Align: Left;
vertical-align: Middle; background-color: #F8F8F8; width: 430px; border-color:
black; border-width: 1px; border-left-style: Solid; border-right-style: Solid;
border-top-style: Solid; border-bottom-style: Solid;"><span class="mrQuestionText" style=" font-size: 10pt;">2. Project
Managers/Directors</span>
</td>
<td id="Cell.1.2" style=" text-Align: Center; vertical-align: Middle;
background-color: #F8F8F8; width: auto; border-color: black; border-width:
1px; border-left-style: Solid; border-right-style: Solid; border-top-style:
Solid; border-bottom-style: Solid;">
<input type="text" name="_QP1_QGRQ17A_QProject__Managers_QQ17A" id="_Q33_Q1_Q0" class="mrEdit" autocomplete="on" style="width: 215px; background-color: rgb(229, 242, 251);" maxlength="10" value="">
</td>
</tr>
<tr>
<td id="Cell.0.3" class="mrGridCategoryText" style=" text-Align: Left;
vertical-align: Middle; background-color: #D8D8D8; width: 430px; border-color:
black; border-width: 1px; border-left-style: Solid; border-right-style: Solid;
border-top-style: Solid; border-bottom-style: Solid;"><span class="mrQuestionText" style=" font-size: 10pt;">3. Designers</span>
</td>
<td id="Cell.1.3" style=" text-Align: Center; vertical-align: Middle;
background-color: #D8D8D8; width: auto; border-color: black; border-width:
1px; border-left-style: Solid; border-right-style: Solid; border-top-style:
Solid; border-bottom-style: Solid;">
<input type="text" name="_QP1_QGRQ17A_QDesigners_QQ17A" id="_Q33_Q2_Q0" class="mrEdit" autocomplete="on" style="width: 215px; background-color: rgb(229, 242, 251);" maxlength="10" value="">
</td>
</tr>
<tr>
<td id="Cell.0.4" class="mrGridCategoryText" style=" text-Align: Left;
vertical-align: Middle; background-color: #F8F8F8; width: 430px; border-color:
black; border-width: 1px; border-left-style: Solid; border-right-style: Solid;
border-top-style: Solid; border-bottom-style: Solid;"><span class="mrQuestionText" style=" font-size: 10pt;">4. Other interior design
staff</span>
</td>
<td id="Cell.1.4" style=" text-Align: Center; vertical-align: Middle;
background-color: #F8F8F8; width: auto; border-color: black; border-width:
1px; border-left-style: Solid; border-right-style: Solid; border-top-style:
Solid; border-bottom-style: Solid;">
<input type="text" name="_QP1_QGRQ17A_QOther__design__staff_QQ17A" id="_Q33_Q3_Q0" class="mrEdit" autocomplete="on" style="width: 215px; background-color: rgb(229, 242, 251);" maxlength="10" value="">
</td>
</tr>
<tr>
<td id="Cell.0.6a" class="mrGridCategoryText" style="text-align: Left;
vertical-align: Middle; background-color: #d8d8d8; width: 430px; border: 1px
Solid black;"><span class="rrSumColTotal mrQuestionTextBold" style="float:right;">A. Total # of Interior Design Staff:</span>
</td>
<td id="Cell.1.6a" style="text-align: Center; vertical-align: Middle;
background-color: #d8d8d8; width: auto; border: 1px Solid black;">
<span id="customSum" style="color: green; background-color: rgb(229, 242,
251);">0</span>
<div style="display:inline-block; clear:none; width:15px;" id="topFour"> </div>
</td>
</tr>
<tr>
<td id="Cell.0.5" class="mrGridCategoryText" style="text-align: left;
vertical-align: middle; width: 430px; border: 1px solid black;
background-color: rgb(248, 248, 248);"><span class="mrQuestionText" style="
font-size: 10pt;"><b style="float:right;">B. Total # of Non-Interior Design
Staff:</b></span>
</td>
<td id="Cell.1.5" style="text-align: center; vertical-align: middle; width:
auto; border: 1px solid black; background-color: rgb(248, 248, 248);">
<input type="text" name="_QP1_QGRQ17A_QNon__Interior_QQ17A" id="_Q33_Q4_Q0" class="mrEdit" autocomplete="on" style=" width: 215px;" maxlength="10" value="">
</td>
</tr>
<tr>
<td id="Cell.0.5" class="mrGridCategoryText" style=" text-Align: Left;
vertical-align: Middle; background-color: #D8D8D8; width: 430px; border-color:
black; border-width: 1px; border-left-style: Solid; border-right-style: Solid;
border-top-style: Solid; border-bottom-style: Solid;"><span class="rrSumColTotal mrQuestionTextBold" style="float: right;">C. Total # of
Employees in the Firm:</span>
</td>
<td id="Cell.1.5" style=" text-Align: Center; vertical-align: Middle;
background-color: #D8D8D8; width: auto; border-color: black; border-width:
1px; border-left-style: Solid; border-right-style: Solid; border-top-style:
Solid; border-bottom-style: Solid;"><span id="spRunningTotal_12_1" class="rrRunningTotal" data-tableordinal="12" data-columnordinal="1">0</span>
</td>
</tr>
</tbody>
</table>
</div>
JavaScript + jQuery：
$('#customSum').closest('table').find('tr td:nth-child(2) input[type=text]').not(':last').addClass('rowA').css("border", "solid 1px black");
var checkValid = setInterval( function() {
$("input.rowA").each(function(i){
var totals = [0,0,0,0];
var total = 0;
if($('input.complete').length == $('input.rowA').length)
{
$('#topFour').html('<img src="http://www.alexldixon.com/images/checkmark.png">');
$("input.rowA").each(function(i){
$(this).css({"background-color": "#ffe", "border": "1px solid green", "border-left": "5px solid green"}).addClass("complete");
items = $('input.rowA:eq(' + i + ')').val();
if(!items.match(/^\d+$/))
{
items = 0;
$('.rowA').on("keypress change", function(evt) {
$(this).css({"background-color": "#ffe", "border": "1px solid red", "border-left": "5px solid red"}).removeClass("complete");
});
}
items = parseInt($('input.rowA:eq(' + i + ')').val(), 10);
totals.push(items);
});
total = 0; //ADD SUM LOGIC HERE: http://stackoverflow.com/questions/1230233/how-to-go-through-an-array-and-add-their-values (Tyler Carter)
$.each(totals,function() {
total += this;
});
$('#customSum').text(total);
} else {
$('#topFour').html('');
totals = [0,0,0,0];
$("input.rowA").each(function(i){
var items = $('input.rowA:eq(' + i + ')').val();
if(!items.match(/^\d+$/)) //Regular Expressions Source: http://www.regexlib.com/RETester.aspx?regexp_id=669
{
items = 0;
$('.rowA').on("keypress change", function(evt) {
$(this).css({"background-color": "#ffe", "border": "1px solid red", "border-left": "5px solid red"}).removeClass("complete");
});
} else {
items = parseInt($('input.rowA:eq(' + i + ')').val(), 10);
$(this).css({"background-color": "#ffe", "border": "1px solid green", "border-left": "5px solid green"}).addClass("complete");
}
totals.push(items);
});
total = 0; //ADD SUM LOGIC HERE: http://stackoverflow.com/questions/1230233/how-to-go-through-an-array-and-add-their-values (Tyler Carter)
$.each(totals,function() {
total += this;
});
$('#customSum').text(total);
}
});
}, 120);
$('#customSum').closest('table').find("td:contains('C.'), tr td:contains('B.')").closest('tr').toggle();
CSS：
.complete {
border: solid 1px green;
}
.rowA {
background-color: #CCF3FF !important;
height: 30px;
text-align: center;
font-size: 17px;
color: green;
}
最后，除了源自parseInt()利用率的问题之外，jsFiddle说我需要将我的总数和总变量移动到可以安全访问它们的位置，这是大多数我的问题开始了。也就是说，如果我在各自的$.each()语句和if()条件中重新声明这些变量，它可以正常工作，但这应该是不好的做法。
答案 0 :(得分：1)
主要问题是使用setinterval的方式。它不仅每120毫秒检查一次输入，而且每次都重新绑定错误输入上的按键/更改事件，并且在其循环内使用相同的循环，从而多次执行每个动作。 另一个性能问题是，在该间隔内，每次都必须在DOM中搜索jquery对象。例如，每次使用$（＆＃34; input.rowA＆＃34;）时，Dom都会搜索类rowA的输入，而如果事先将它们放入变量中，则可以重用缓冲的值。
最好只有一个更改/ keyup事件来进行检查，并在页面加载时重复使用相同的代码来检查那些预加载的值，而不是间隔。如果尽管如此，你仍然需要这个间隔（虽然通常在必须调用检查时会知道触发器），清理后的代码应该证明更加资源友好（但如果确实真的需要setinterval，可以进一步改进）< / p>
var $inputBoxes = $('#customSum').closest('table').find('tr td:nth-child(2) input[type=text]').not(':last');
$inputBoxes.addClass('rowA');
//or in case the former code was just a test scenario, use var $inputBoxes = $('input.rowA');
var $custSum = $('#customSum'), $chk = $('#topFour').html('<img src="http://www.alexldixon.com/images/checkmark.png">').hide(); //add the check once, but hidden (can be done in hard coded in html instead)
$inputBoxes.on("keyup change propertychange input paste", function(e) {
SetInput(this);
CheckInputs();
});
function SetInput(inputBox){
var $input = $(inputBox), val = $input.val(), isvalid = val.length > 0 && isFinite(val) && val > 0;
$input.data('valid', isvalid).data('number', isvalid ? parseInt(val) : null); //instead of an array, reuse the jquery elements
$input.toggleClass('complete', isvalid).toggleClass('error', val.length > 0 && !isvalid);
}
function SetAllInputs(){
$inputBoxes.each(function(){SetInput(this);});
CheckInputs();
}
function CheckInputs(){
var total = 0, validcount = 0;
$inputBoxes.each(function(){
if($(this).data('valid')){
validcount++;
total+= $(this).data('number');
}
});
$custSum.text(total);
$chk.toggle(validcount === $inputBoxes.length); //show the 'check' image if all input is valid
}
SetAllInputs(); //call on page load, in case of pre entered values.