javascript - 不确定将表单输入与数组进行比较的正确方法

Question

我在一个网站上工作，我试图将用户输入输入到表单中，然后与我为匹配值创建的数组进行比较。我不确定为什么，但我当前的代码一直给我输入的代码无效的错误。不确定是否有人可以帮助我。我相信这是我尝试进行比较的方式。请参阅 Fiddle 示例。您可以输入选项卡上显示的示例代码之一。如果它工作正常，一个 div 应该显示在您输入 can 代码的 block 下方。谢谢!

//hide tuna fish image on load
$('#skipjackImg').hide();
$('#albacoreImg').hide();	
	
//swap tuna div on hover
$('#displayTunaDiv').mouseover(function() {
    $('.activeTuna').hide();
	$('.secondaryTuna').show();
	$('.activeTunaText').hide();
	$('.skipjackSpeciesText').show();
	$('#tunaCanImg').hide();
	$('#skipjackImg').show();
 });
	
$('#displayTunaDiv').mouseout(function() {
	$('.secondaryTuna').hide();
	$('.activeTuna').show();
	$('.activeTunaText').show();
	$('.skipjackSpeciesText').hide();
	$('#tunaCanImg').show();
	$('#skipjackImg').hide();
}); 
	
//swap albacore tuna div on hover
$('#displayAlbacoreTunaDiv').mouseover(function() {
    $('.activeAlbacoreTuna').hide();
	$('.secondaryAlbacoreTuna').show(); 
    $('.activeAlbacoreTunaText').hide();
	$('.albacoreSpeciesText').show();
	$('#albacoreCanImg').hide();
	$('#albacoreImg').show();
 });
	
$('#displayAlbacoreTunaDiv').mouseout(function() {
	$('.secondaryAlbacoreTuna').hide();
	$('.activeAlbacoreTuna').show(); 
	$('.activeAlbacoreTunaText').show();
	$('.albacoreSpeciesText').hide();
	$('#albacoreCanImg').show();
	$('#albacoreImg').hide();
}); 	

//load gif on click
$(function(){
	
	//grab gif image and assign to variable
    var image = new Image();
		image.src='https://cento.com/images/gif/EARTH.gif';

	//store can code values in array
	var canCode = [
		{code: "7283SCBSGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7283SC1SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7283SC2SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7283SC3SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7283SC4SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7283SCASGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7338SC3SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7338SC4SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7338SCASGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7338SCBSGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7338SC1SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7338SC2SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7355SEASGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7355SEBSGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7257S93S2T", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7257S9AS2T", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7257S9BS2T", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7027S93S2T", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7339S91SGT", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7339S92SGT", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7339S93SGT", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7339S94SGT", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7347S9ASGT", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "61082SD1SMT", codeOZ: 5, species: "albacore"}
	];
	
	//functon to grab data from array
	$.each(canCode, function(i, item) {
		
		//assign data to variables 
		var code = item.code.toUpperCase();
		var codeOZ = item.codeOZ;
		var species = item.species;
		var country = item.country;
		var boat = item.boat;
	
    //refresh map on button click
	$('#canCode').click(function(e){
		
		//prevent default behavior
		e.preventDefault();
		
		//assign user input to variable
    	var val=$("#can").val().toUpperCase();
		
		//compare user input against array
    	if(item.code === val) { 
			
			//show vessel div
			$('.vesselDiv').show();
			 
			//search for tuna identifier and show correct information
			if (val.includes("GT") >= 0 || val.includes("2T") >= 0) {
				$('.selectedTunaCan').show();    
				$('.selectedAlbacoreTunaCan').hide();    
				$('.fishSpeciesSkipjack').show();
				$('.fishSpeciesAlbacore').hide();
			} else if (val.indexOf("MT") >= 0) {
				$('.selectedTunaCan').hide();
				$('.selectedAlbacoreTunaCan').show();
				$('.fishSpeciesSkipjack').hide();
				$('.fishSpeciesAlbacore').show();
			}
			
			//hide error message 
	    	$("#invalidCan").css("display", "none");
	    	$("#invalidCan").hide(); 
	
			//hide original gif frame 
			$('#gifFirstFrame').hide();
       
      		// "refresh" the gif and remove the invis class (when using display none the gif somehow won't be refreshed)
      		$('#gif').attr('src',image.src).removeClass('invis');
			$('#gif').show();
      
      		// timer, which hides gif and shows image and button again
      		setTimeout(function(){ 
	    		$('#gif').removeClass('invis'); 
      		}, 10000)
			
	  	} else {
			
			//show error message
			$("#invalidCan").css("display", "block");
			$("#invalidCan").show();
			
			//show original gif frame
			$('#gifFirstFrame').show();
			$('#gif').hide();
			
			//hide vessel div
			$('.vesselDiv').hide();
			
	  	} 

	});	 
		
	});
});

<link href="https://www.cento.com/css/styles.css" rel="stylesheet"/>
<link href="https://www.cento.com/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Tuna Cans Row -->
<section id="cento-no-texture-half-padding-background" data-speed="2" data-type="background">
	<div class="container">
		
		<div class="row">  
			<div class="col-md-12 col-sm-12">  
				<h1 class="fancyh1BTMB">OUR TUNA PRODUCTS</h1>
				<br> 
			</div>
		</div>
		
		<!-- SPACER --> 
		<div class="col-md-1">
			&nbsp;
		</div>
		<!-- SPACER END -->
		
		<!-- Tuna Form --> 
		<div class="col-md-4">
			<div id="displayTunaDiv">
				<div class="row activeTuna"> 
				  <div class="btmbContent"> 
					  <div class="btmbContent-overlay"></div>
					  <img id="tunaCanImg" class="btmbContent-image" src="http://www.cento.com/images/misc/btmb/tuna-fish-can.png" alt="Cento Tuna Fish">
				  </div>
				</div>
				<div class="row secondaryTuna"> 
				  <div class="btmbContent">   
					  <img id="skipjackImg" class="btmbContent-image" src="http://www.cento.com/images/misc/btmb/skipjack-fish.png" alt="Cento Skipjack Tuna Fish">
				  </div>
				</div>
			</div>
			<div class="activeTunaText">
				<h2 class="btmbCenterText h2custom">Cento Tuna Fish in Olive Oil</h2>
				<p class="btmbCenterText">FAD-free and wild caught in the Northern Pacific Region, Cento Tuna Fish in Olive Oil is solid packed light tuna with no additives or preservatives. Dolphin safe, our tuna is an excellent ingredient in tuna fish sandwiches and pasta dishes.</p>
			</div>
			<div class="skipjackSpeciesText">
			 	<h2 class="btmbCenterText h2custom">Skipjack Tuna</h2>
			 	<p class="btmbCenterText">The smallest and most abundant major tuna species, Skipjack tuna have a streamlined body that’s mostly without scales and can live as long as 8-12 years. Unlike other tuna, Skipjack are cold-blooded and cannot maintain their body temperature. Found mainly in tropical areas and most abundantly near the equator, Skipjack swim near the surface at night and can dive up to 850 feet during the day. As a top predator in the marine food chain, tuna helps maintain a balance in the ocean’s environment. Skipjack tuna are highly migratory and spend the majority of their lives in large schools in the open ocean, aggregating around floating objects or upwelling areas where nutrient-rich cooler water meets warmer, nutrient-depleted water. Rich in essential nutrients such as omega-3 fatty acids, protein, selenium and vitamin D.</p>
			 </div>
            <a href="https://www.cento.com/product-categories/cento.php#7079670051"><button class="btn btn-info btn-lg btn-block">View Product</button></a>
		</div>
		<!-- Tuna Form End -->  
		
		<!-- SPACER --> 
		<div class="col-md-2">
			&nbsp;
		</div>
		<!-- SPACER END --> 
		
		<!-- Albacore Tuna Form -->  
		<div class="col-md-4">
			<div id="displayAlbacoreTunaDiv">
				<div class="row activeAlbacoreTuna"> 
				  <div class="btmbContent"> 
					  <div class="btmbContent-overlay"></div>
					  <img id="albacoreCanImg" class="btmbContent-image" src="http://www.cento.com/images/misc/btmb/albacore-tuna-fish-can.png" alt="Cento Albacore Tuna Fish">
				  </div>
				</div>
				<div class="row secondaryAlbacoreTuna"> 
				  <div class="btmbContent">  
					  <img id="albacoreImg" class="btmbContent-image" src="http://www.cento.com/images/misc/btmb/albacore-fish.png" alt="Cento Albacore Tuna Fish">
				  </div>
				</div>
			</div> 
			<div class="activeAlbacoreTunaText">
				<h2 class="btmbCenterText h2custom">Cento Albacore Tuna Fish with Extra Virgin Olive Oil</h2>
				<p class="btmbCenterText activeAlbacoreTunaText">Cento Albacore Tuna Fish with Extra Virgin Olive Oil delivers a mild, clean flavor in solid fillets. Naturally gluten-free with no additives or preservatives, tuna is high in protein and a natural source of Omega-3s. The MSC FAD-Free Certification ensures that our tuna is safe, sustainable and wild caught in the Northern Pacific Ocean.</p>
			</div>
			<div class="albacoreSpeciesText">
			 	<h2 class="btmbCenterText h2custom">Albacore Tuna</h2>
			 	<p class="btmbCenterText">Renowned for their extensive annual migrations and ability to swim long distances, Albacore tuna are built for speed with a torpedo-shaped body and slender tail. Albacore can reach up to 4 feet in size, weigh up to 80lbs, and adults can live up to 12 years old. The highly evolved circulatory systems that Albacore have helps regulate body temperature to higher levels than the surrounding water, which increases muscle efficiency and helps the tuna maintain high speeds of up to 50mph. Similar-sized tuna form large schools, often up to 19 miles wide. These opportunistic hunters feed primarily during the day on both the ocean’s surface and depths of up to 1640 feet. Albacore tuna are attracted to upwelling fronts where cold, nutrient-rich water from the deep ocean rises to the warmer surface water. Albacore are high in omega-3 fatty acids, low in sodium, and a good source of vitamin A, vitamin B12, selenium and niacin.</p>
			 </div>		
			<a href="https://www.cento.com/product-categories/cento.php#7079670053"><button class="btn btn-info btn-lg btn-block">View Product</button></a>
		</div>
		<!-- Albacore Tuna Form End --> 
		
		<!-- SPACER --> 
		<div class="col-md-1">
			&nbsp;
		</div>
		<!-- SPACER END -->
		
	</div> 
</section>
<!-- Tuna Cans Row End -->


<!-- Method of Catch Row Start -->
<section id="btmb-blue-half-padding-background" data-speed="2" data-type="background">
	<div class="container"> 
		
		<div class="row">   
			<div class="col-md-12 col-sm-12">  
				<h1 class="fancyh1BTMBWhite">METHOD OF CATCH</h1>
				<br> 
			</div>
		</div>
		
		<div class="row"> 
			<div class="col-md-12">
				<br>
				<img style="margin-right: 20px; margin-bottom: 10px;" class="img-responsive pull-left" src="http://via.placeholder.com/500x600" alt="">
				<p style="margin-top: -7px;">This tuna was caught using the Pole and Line fishing method, a method in which fish are caught one-by-one. After baiting the tuna using smaller fish and a sprinkler system to spray the ocean’s surface, fishermen line up on the boat’s edge with hand-held fishing rods that have short lines and barbless hooks. Barbless hooks enable a quick release once the tuna is caught so that the line can quickly be returned to the water to catch additional fish. Because the pole and line method catches tuna right on the ocean surface, tuna caught with this method is lower in mercury and higher in healthy omega-3 fatty acids. This method is also highly selective and allows fishermen to only catch tuna of a certain size, leaving juveniles to grow to spawning age and replenish the population.</p>
				<p>Cento tuna is caught without the use of Fish Aggregating Devices (FADs), floating objects that are strategically placed in the ocean to attract large groups of adult predatory fish. Because many types of fish and marine species can be attracted by FADs, FADs can often cause the catch of unwanted species and pose a danger to mammals and sea turtles that may become entagled. Because pole and line fishing is a highly selective fishing method, it eliminates the potential for bycatch, which is defined as the incidental catch of unwanted species of fish, sharks, seabirds, turtles and other large marine animals. This means that no other marine species were caught or harmed in the fishing of this tuna.</p>
				<p>In addition to being the most sustainable way of fishing, pole and line fishing provides critical sources of income and livelihood in developing coastal states. Because local crews are employed, fishermen spend days instead of months on the water. This employment is vital to island states and with locally owned fisheries: inhabitants of these costal states are able to secure decent work conditions close to their home without the risk of human rights violations. Pole and line fishing methods minimize environmental impact and promotes a sustainable exploitation of shared marine resources.</p>
			</div> 
		</div>
		
	</div>
</section>
<!-- Method of Catch Row End -->

<!-- Back to my Boat Data Row -->
<section id="cento-white-background-no-padding-background" data-speed="2" data-type="background">
 	 <div class="container">
		 
        <div class="row">
			
			<!-- SPACER --> 
			<div class="col-md-1">
				&nbsp;
			</div>
			<!-- SPACER END -->
			
        	<!-- Back to my Boat Map -->
        	<div class="col-md-6">
				<br>
				<br>
				<img id="gif" class="img img-responsive invis" style="display: none" src="images/gif/EARTH.gif" alt="Tuna Traceability">
				<img id="gifFirstFrame" class="img img-responsive" style="display: block" src="https://www.cento.com/images/misc/btmb/earth-first-frame.jpg" alt="Tuna Traceability">
				<br>
				<br> 
        	</div> 
			
            <!-- Back to my Boat Form -->
            <div class="col-md-4">    
                <div class="row">
					<br>
					<br>
                    <div class="col-xs-12 col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title headingCustom"><img class="img-responsive" src="https://www.cento.com/images/misc/btmb/can-code.jpg" alt="Tuna Can Code"></h3>
                            </div>
                            <div class="panel-body">
                                <div class="row"> 
                                    <div class="col-xs-12">
										<label>Skipjack Sample: 7283SC2SGT</label>
										<label>Albacore Sample: 61082SD1SMT</label>
                                        <p>The can code is located on the bottom of your Cento<sup>®</sup> Tuna Can next to the “best buy” date. If you need assistance in tracing your can, please contact our <a href="https://www.cento.com/support/contact.php">customer support</a>.</p>
										<div class="form-group">
											<label id="invalidCan">Invalid Can Code</label>
											<input style="text-transform:uppercase" type="text" placeholder="Enter Can Code" class="form-control" id="can">
										</div> 
                                    </div>                        
                                </div> 
								<div class="row">
									<div class="col-xs-12">
										<button class="btn btn-info btn-lg btn-block" id="canCode" href="#">Submit</button>
									</div>
								</div> 
                            </div> 
                        </div>
                    </div>
					<br>
					<br>
                </div>
            </div>
            <!-- Back to My Boat Form End --> 
			
			<!-- SPACER --> 
			<div class="col-md-1">
				&nbsp;
			</div>
			<!-- SPACER END -->
			
    	</div>
    </div>
</section>
<!-- Back to My Boat Data Row End -->

<!-- Vessel Row Start -->
<section class="vesselDiv" id="cento-no-texture-half-padding-background" data-speed="2" data-type="background">
	<div class="container">
		<div class="row">
			
			<div class="row">   
				<div class="col-md-12 col-sm-12">  
					<h1 class="fancyh1BTMB">YOUR RESULTS</h1>
					<br> 
				</div>
			</div>
			
			<div class="vesselContainer">
				<div class="row">
					<div class="col-md-12">
						<div class="col-md-6">
							<div class="selectedTunaCan centerText">
								<h2 class="btmbCenterText h2custom">Cento Tuna Fish in Olive Oil</h2>
								<img style="width: 65%;" src="https://www.cento.com/images/misc/btmb/tuna-fish-can-condensed.png" alt="Cento Albacore Tuna Fish">
								<div class="fishSpeciesSkipjack"><strong>Species:</strong> Skipjack</div>
								<div class="fishNetWeightSkipjack"><strong>Net Weight: </strong> 5 oz</div>
							</div>
							<div class="selectedAlbacoreTunaCan centerText">
								<h2 class="btmbCenterText h2custom">Cento Albacore Tuna Fish with Extra Virgin Olive Oil</h2>
								<img style="width: 65%;" src="https://www.cento.com/images/misc/btmb/albacore-tuna-fish-can-condensed.png" alt="Cento Tuna Fish">
								<div class="fishSpeciesAlbacore"><strong>Species:</strong> Albacore</div>
								<div class="fishNetWeightAlbacore"><strong>Net Weight: </strong> 5 oz</div>
							</div> 
						</div>
						<div class="col-md-6">
							<h2 class="btmbCenterText h2custom">Vessel Information</h2>
							<img class="img-responsive center" src="https://www.cento.com/images/misc/btmb/maldives-flag.png" alt="Maldives Flag">
							<div id="vesselCountry" class="center"><strong>Country of Origin:</strong> Maldives</div>
							<div id="vesselName" class="center"><strong>Name of Vessel:</strong> Dhonis</div>
						</div> 
					</div>
				</div>
			</div>
		
			
		</div>
	</div>
</section>
<!-- Vessel Row End -->

Answer 1

当您获得用户的输入后，您就可以使用 Array.prototype.filter()从您的 canCode 数组中选择匹配项。

如果用户的输入存储在名为 usersInput 的变量中，您可以将 code 与 usersInput 进行比较

let chosen = canCode.filter(can => can.code===usersInput);

此示例匹配我硬编码的选项“7338SCBSGT”，并在控制台中显示匹配的对象。
由于 filter 返回一个数组，因此选择第一个(零元素)元素。如果没有匹配项，chosen.length 将为 0，chosen[0] 将为 undefined。

var usersInput = "7338SCBSGT";
var canCode = [
		{code: "7283SCBSGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7283SC1SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7283SC2SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7283SC3SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7283SC4SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7283SCASGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7338SC3SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7338SC4SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7338SCASGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7338SCBSGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7338SC1SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7338SC2SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7355SEASGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7355SEBSGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7257S93S2T", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7257S9AS2T", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7257S9BS2T", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7027S93S2T", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7339S91SGT", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7339S92SGT", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7339S93SGT", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7339S94SGT", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "7347S9ASGT", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis"},
		{code: "61082SD1SMT", codeOZ: 5, species: "albacore"}
	];
let chosen = canCode.filter(can => can.code===usersInput);
// Since filter returns an array, take the first (zero-eth) element for the choice.
// chosen.length will be 0 and chosen[0] will be undefined if there was no match
console.log(chosen[0]);