jQuery：字段为空后重置类

注意：以下解决方案来自本主题 ，请先查看。

我有11个输入：

（其中[something]是一个名称，每个输入都不同）

 $(document).on("change", ".inputs", function(){ var thisclass = $(this).attr('class').split("-")[0]; if($(this).val() == ''){ // } highlightInputNumbers(thisclass, 0); }); 

highlightInputNumbers函数就是这样的：

 function highlightInputNumbers(classe, stepcount, empty){ var all= $("td[class*="+classe+"]"); var index = all.length-1; var concat_steps = $(all[index]).html().split('.') //var due_serie = $(all[index]).html().split('.') var due_serie = $('.'+classe+'-input').val().split('.') for (var i = index; i >= (index-stepcount)+2; i--) { due_serie = due_serie.concat($(all[i-1]).html().split('.')); }; //Rimuovo i doppioni var serieCompleta = []; $.each(due_serie, function(i, el){ if($.inArray(el, serieCompleta) === -1) serieCompleta.push(el); }); //Ottengo dati for(var s = 0; s < index-(stepcount-1); s++){ var bar = $(all[s]); var barnum = bar.html().split('.'); bar.html(''); var found = 0; for(i = 0; i<= barnum.length-1; i++){ for(n = 0; n<= serieCompleta.length-1; n++){ if(i != 4){ var punto = '.' }else{ var punto = ''} /* Problem here:*/ if(barnum[i] == serieCompleta[n]){ bar.append(''+barnum[i]+''+punto+''); found = barnum[i]; } } if(barnum[i] != found){ bar.append(''+barnum[i]+punto+''); } } } } 

我评论的地方/*Problem here*/是我突出列中的数字（我已插入），但如果我删除输入中的数字，它们会保持突出显示…如果我更改它们保留旧的。 。

如您所见： https ： //dl.dropboxusercontent.com/u/2276958/Cols_and_rows.mov

Answer 1

代码中添加少量内容。 让我试着解释你的代码中发生了什么。

首先尝试：

1. 您的代码获取输入值（例如，89.30.20）
2. 循环遍历表中的所有可用值
3. 将每个值拆分为’。’
4. 然后遍历这些spitted值以检查匹配和突出显示

5. 将 匹配的数字 替换为突出显示的范围 （即20到20和不匹配的数字到褪色的范围 。

   这一切都是第一次有效。 但在第二次尝试时，您的代码从第3步开始 。 与步骤3中一样，代码尝试按“。”拆分值。 但是在第一次尝试时，值被Span值替换。 所以现在为了纠正这个问题，我添加了一些小的检查和2-3行额外的代码来从Span值中提取实际值。

额外的代码是：

  // Check if values bar already contains Span tags (means already processed in first try var hasSpans = bar.find('span').length>0; if(hasSpans) { //If yes then extract the actual values from these span tags without '.' (This will work for all tries after FIRST) barnum=bar.find('span').map( function() { if($(this).html() != '.') return $(this).html().replace('.',''); }).get(); } // else normal case, split the values by '.' (This will for very FIRST try) else barnum = bar.html().split('.'); 

 $(document).on("change", ".inputs", function(){ var thisclass = $(this).attr('class').split("-")[0]; if($(this).val() == ''){ // } highlightInputNumbers(thisclass, 0); }); function highlightInputNumbers(classe, stepcount, empty){ var all= $("td[class*="+classe+"]"); var index = all.length-1; var concat_steps = $(all[index]).html().split('.') //var due_serie = $(all[index]).html().split('.') var due_serie = $('.'+classe+'-input').val().split('.') for (var i = index; i >= (index-stepcount)+2; i--) { due_serie = due_serie.concat($(all[i-1]).html().split('.')); }; //Rimuovo i doppioni var serieCompleta = []; $.each(due_serie, function(i, el){ if($.inArray(el, serieCompleta) === -1) serieCompleta.push(el); }); //Ottengo dati for(var s = 0; s < index-(stepcount-1); s++){ var bar = $(all[s]); var barnum; var hasSpans = bar.find('span').length>0; if(hasSpans) { barnum=bar.find('span').map( function() { if($(this).html() != '.') return $(this).html().replace('.',''); }).get(); } else barnum = bar.html().split('.'); bar.html(''); var found = 0; for(i = 0; i<= barnum.length-1; i++){ for(n = 0; n<= serieCompleta.length-1; n++){ if(i != 4){ var punto = '.' }else{ var punto = ''} /* Problem here:*/ if(barnum[i] == serieCompleta[n]){ bar.append(''+barnum[i]+''+punto+''); found = barnum[i]; } } if(barnum[i] != found){ bar.append(''+barnum[i]+punto+''); } } } } 

 span.highlight{ color:green; font-weight:bold; } 

  
 
02/05/2015
89.10.86.30.65
 
30/04/2015
96.11.73.36.13
 
02/05/2015
78.34.50.72.11
 
30/04/2015
34.78.69.60.22
 
02/05/2015
12.29.30.69.33
 
30/04/2015
59.10.20.96.44
 
 
 
 
02/05/2015
89.10.86.30.65
 
30/04/2015
96.11.73.36.13
 
02/05/2015
78.34.50.72.11
 
30/04/2015
34.78.69.60.22
 
02/05/2015
12.29.30.69.33
 
30/04/2015
59.10.20.96.44