javascript - 如何修复计数器不显示正确值以及使用新字符串重置的问题

Question

这是一个jsfiddle:https://jsfiddle.net/m6vxgg0m/15/

控制台日志显示输出。

我一直在尝试使用 jQuery 获取数组中字符串出现的次数。我用来检查字符串值是否存在于数组的每个索引中的循环似乎是正确的。我不确定为什么它不能正常工作。我从来没有得到正确的计数器值。如果我将字符串保留在文本字段中并继续按 Enter 键，即使我在 keyup 事件中将计数器设置回 0，计数器也会不断增加。如果数组中某个字符串出现两次，则计数器应始终显示值 2。但事实并非如此。非常沮丧。

JS:

	$(function(){ keywordSearchFeature() });

	function keywordSearchFeature(){
	  
	  // Selector Variables
	  var inputSel = $('#search-term');
	  var noticeLblSel = $('.searchInstance');
	  var contentSel = $('.RadGrid.RadGrid_Default.mydatagrid .rgMasterTable tr');

	  // Functional Variables
	  var keywordVal;
	  var keywordValL; // keywordVal lowercase
	  var keyCounter = 0; // counter
		var cellValues = []; // 
	  var cellValuesL = []; // cellValues lowercase

	  // Type keyword
	  inputSel.on('keyup', function(e){
		
		// Reset Counter
		keyCounter = 0;
		
		// Keyword Value
		keywordVal = $(this).val();
		
		// Keyword Lowercase Value
		keywordValL = keywordVal.toLowerCase();
		
		// console.log(keywordValL);
		
		// Clear notice label when retyping
		noticeLblSel.text('');
		
		// Enter Key
		if (e.which == 13) {
		  
		  if(keywordValL != null && keywordValL != '' && keywordValL.length > 3){
			
			console.log('ENTER KEY CLICKED: Value entered is: ' + keywordValL);
			
			// Store content in arraykeyinstances[]
			contentSel.each(function(i,tr){
				var tdLines = $('td',tr).map(function(i,td){
				
				// Get each cell string, and trim whitespace
				var tdCellContent = $(td).text().trim();
				
				// console.log(tdCellContent);
				
				// Push each cell value to array
				cellValues.push(tdCellContent);
				cellValuesL.push(tdCellContent.toLowerCase());
			  });
			});
			
			// console.log(cellValues);
			console.log(cellValuesL);
			
			for (var i = 0; i < cellValuesL.length; i++) {
			  if (cellValuesL[i] == keywordValL) {
				keyCounter++;
			  }
			}
			
			console.log(keyCounter);
			
			// Notice label text 
			if(keyCounter > 0) {
				noticeLblSel.text('Instance 1 of ' + keyCounter + ' found on this page.');
			} else {
				noticeLblSel.text('No instances for "' + keywordVal + '" found.');
			}
		  } else {
			noticeLblSel.text('Please enter 4 or more characters.');
		  }
		}
	  });
	  
	  // Click Events
	  //$(document).on('click','.btn-searchnext',function(){});
	  //$(document).on('click','.btn-searchprev',function(){});

	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="formholder searchkeywordholder">
			<div class="form_inner">
				<div class="formrow form-col-1" tabindex="0">
					<div id="find-in-page">
						<div class="fielditem searchfielditem">
							<input type="text"
								id="search-term"
								placeholder="Type in the phrase to search and click Next..."
								title="Enter Search Phrase"
								class="text searchfield"
								aria-label="Search Keyword Field" />
							<button id="next"
								class="button bttn-clear btn-searchnext"
								title="Next"
								aria-label="Search Next Button">
								Next
							</button>
							<button id="prev"
								class="button bttn-find btn-searchprev"
								title="Previous"
								aria-label="Search Previous Button">
								Previous
							</button>
						</div>
						<label id="labelResult" class="searchInstance"></label>
					</div>
				</div>
			</div>
		</div>
		
			<div class="RadGrid RadGrid_Default mydatagrid staticheaders nostripes" id="ctl00_MainContent_customProjectAssets_gridItems" tabindex="0">
				<div class="rgDataDiv" id="ctl00_MainContent_customProjectAssets_gridItems_GridData">
					<table class="rgMasterTable rgClipCells rgClipCells" id="ctl00_MainContent_customProjectAssets_gridItems_ctl00">

						<tbody>
							<tr class="groupinghighlight" id="ctl00_MainContent_customProjectAssets_gridItems_ctl00__0">
								<td valign="middle">
									<div>
										
									</div>
								</td>
								<td>
									<div>
										<div>
											<div id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl04_divChildAssetStyle">
												Antenna B1
											</div>
										</div>
									</div>
								</td>
								<td>
									Equipment and Materials
								</td>
								<td>
									C2 Equipment
								</td>
								<td>
									Antenna
								</td>
								<td>
									Basic
								</td>
								<td>
									B1
								</td>
								<td>
									<div class="rating_general rating_yellow" id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl04_divRating" title="Asset's Rate">
										0.36
									</div>
								</td>
								<td align="center">
									<span class="aspNetDisabled"><input disabled="disabled" id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl04_checkboxOverride" name="ctl00$MainContent$customProjectAssets$gridItems$ctl00$ctl04$checkboxOverride" type="checkbox"></span>
								</td>
								<td>
									<span id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl04_spanAssetTag" title="Incident Response/Recovery">IRR</span>
								</td>
								<td align="center">
									<span id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl04_spanClassificationLevel" title="UNCLASSIFIED">U</span>
								</td>
								<td align="center">
									<input id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl04_checkboxDelete" name="ctl00$MainContent$customProjectAssets$gridItems$ctl00$ctl04$checkboxDelete" onclick="$.onCheckDeleteChange('0');" type="checkbox">
								</td>
							</tr>
							<tr class="groupinghighlight" id="ctl00_MainContent_customProjectAssets_gridItems_ctl00__1">
								<td valign="middle">
									<div>
										
									</div>
								</td>
								<td>
									<div>
										<div style="width: 200px; margin: 0 auto;">
											<div id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl05_divChildAssetStyle">
												Content 1
											</div>
										</div>
									</div>
								</td>
								<td>
									This is content
								</td>
								<td>
									My text
								</td>
								<td>
									lorem ipsum dolor
								</td>
								<td>
									sit amet
								</td>
								<td></td>
								<td>
									<div class="rating_general rating_orange" id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl05_divRating" title="Asset's Rate">
										0.56
									</div>
								</td>
								<td align="center">
									<span class="aspNetDisabled"><input disabled="disabled" id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl05_checkboxOverride" name="ctl00$MainContent$customProjectAssets$gridItems$ctl00$ctl05$checkboxOverride" type="checkbox"></span>
								</td>
								<td>
									<span id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl05_spanAssetTag" title="No Asset Tag Assigned"></span>
								</td>
								<td align="center">
									<span id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl05_spanClassificationLevel" title="UNCLASSIFIED">U</span>
								</td>
								<td align="center">
									<input id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl05_checkboxDelete" name="ctl00$MainContent$customProjectAssets$gridItems$ctl00$ctl05$checkboxDelete" onclick="$.onCheckDeleteChange('1');" type="checkbox">
								</td>
							</tr>
							<tr class="rgRow" id="ctl00_MainContent_customProjectAssets_gridItems_ctl00__2">
								<td valign="middle">
									<div>
										
									</div>
								</td>
								<td>
									<div>
										<div style="width: 200px; margin: 0 auto;">
											<div class="iconGridSubordinateArrow" id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl06_divChildArrowImage" style="float: left; width: 17px;"></div>
											<div id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl06_divChildAssetStyle" style="float: left; width: 180px;">
												equivalent
											</div>
										</div>
									</div>
								</td>
								<td>
									People
								</td>
								<td>
									Individuals
								</td>
								<td>
									lorem
								</td>
								<td>
									ipsum
								</td>
								<td></td>
								<td>
									<div class="rating_general rating_yellow" id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl06_divRating" title="Asset's Rate">
										0.44
									</div>
								</td>
								<td align="center">
									<span class="aspNetDisabled"><input disabled="disabled" id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl06_checkboxOverride" name="ctl00$MainContent$customProjectAssets$gridItems$ctl00$ctl06$checkboxOverride" type="checkbox"></span>
								</td>
								<td>
									<span id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl06_spanAssetTag" title="No Asset Tag Assigned"></span>
								</td>
								<td align="center">
									<span id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl06_spanClassificationLevel" title="UNCLASSIFIED">U</span>
								</td>
								<td align="center">
									<input id="ctl00_MainContent_customProjectAssets_gridItems_ctl00_ctl06_checkboxDelete" name="ctl00$MainContent$customProjectAssets$gridItems$ctl00$ctl06$checkboxDelete" onclick="$.onCheckDeleteChange('2');" type="checkbox">
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>

Answer 1

首先，每次按 Enter 键时 keyCounter 都会增加，这是因为您没有在 keyup 中将 cellValuesL 重置为空数组> 事件处理程序。这意味着，在您第一次按 Enter 后，contentSel 表将被解析，36 个文本值将被推送到 cellValuesL 上。下次您按 Enter 键时，contentSel 会再次解析，并将相同的 36 个值再次推送到 cellValuesL 上，因此 cellValuesL.length 现在为 72 . 每次按 Enter 键时，相同的 36 个值都会被推送到 cellValuesL 上。

解决此问题的一种方法是将 var cellValuesL = []; 移至 keyup 事件处理程序内部。不过，更好的解决方案是将构建 cellValuesL 数组 (contentSel.each) 的代码移至 keyup 事件处理程序之外。由于表中的文本值永远不会改变，因此每次用户按 Enter 键时不断从表中获取文本并构建新数组是没有意义的。

关于在 cellValuesL 数组中出现两次字符串的第二点，我认为您一定对代码正在检查的内容感到困惑。您的代码循环遍历 cellValuesL 中的每个值，并且对于该数组中等于小写用户输入的每个元素，keyCounter 会递增。在您的示例中，cellValuesL 中没有两个元素相等，因此循环不可能产生多个匹配项。我假设您必须要检查 cellValuesL 中的每个元素是否包含小写的用户输入。如果这是所需的行为，您将需要将条件更新为以下内容:

for (var i = 0; i < cellValuesL.length; i++) {
    if (cellValuesL[i].indexOf(keywordValL) > -1) {
        keyCounter++;
    }
}

实现与上述代码相同的效果的更现代、更优雅的方法是使用 Array.prototype.filter和一个Arrow Function :

keyCounter = cellValuesL.filter(val => val.indexOf(keywordValL) > -1).length;

最后，我想建议你的 JavaScript 代码可以被清理很多。下面是一个不使用任何 ES6 语言功能的示例:

$(function () {

    var inputSel = $('#search-term');
    var contentSel = $('.RadGrid.RadGrid_Default.mydatagrid .rgMasterTable tr');
    var noticeLblSel = $('.searchInstance');
    var cellValuesL = $('td', contentSel).map(function () {
        return $(this).text().trim().toLowerCase();
    }).get();

    inputSel.on('keyup', function (e) {
        noticeLblSel.text('');

        if (e.which !== 13) { return; }

        var keywordVal = $(this).val();
        var keywordValL = keywordVal.toLowerCase();

        if (!keywordValL || keywordValL.length <= 3) { 
            noticeLblSel.text('Please enter 4 or more characters.');
            return;
        }

        var keyCounter = cellValuesL.filter(function (val) {
            return val.indexOf(keywordValL) > -1;
        }).length;

        if (keyCounter > 0) {
            noticeLblSel.text('Instance 1 of ' + keyCounter + ' found on this page.');
        } else {
            noticeLblSel.text('No instances for "' + keywordVal + '" found.');
        }
    });

});

我还创建了一个示例 fiddle .