我的弹出窗口唯一的问题是“else”条件不适用于第一次搜索输入/点击。但是，“if”条件确实有效。第一次输入/点击后的一切工作正常。有什么想法或建议??
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src='http://code.jquery.com/jquery-2.1.3.min.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<style>
#closeBtn, #searchBtn{
background-color: #180D01;
color: #fed136;
}
#closeBtn, #searchBtn:hover{
color: #180D01;
background-color: #fed136;
}
</style>
<div class="form-group">
<label for="test" class="col-sm-3 control-label">Search a country!</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="search" placeholder="Enter A Country">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-6 col-sm-3">
<!--==============SEARCH BUTTON ===============-->
<a href="#" tabindex="0" role="button" class="btn btn-default" id="searchBtn" data-container="body" data-toggle="popover" >Search</a>
</div>
</div>
<script>
$( document ).ready(function() {
//CASE SENSITIVE!!!
var validCountriesArray = [
"Sweden",
"France",
"Germany",
"United States", "usa",
"Austria",
"Switzerland",
"Denmark",
"Great Britain", "england", "UK", "U.K.",
"West Germany",
"United Team of Germany",
"Soviet Union", "Russia",
"Netherlands",
"Spain"];
function invalidPopoverShow(){
$('[data-toggle="popover"]').popover({
placement: "right",
trigger: "focus",
content: "Choose a valid country that had Dressage/Equestrain participants in the Olympics! (Click anywhere to make popover disappear)",
});
}
function invalidPopoverHide(){
$('[data-toggle="popover"]').popover('hide');
}
////========================
$('#searchBtn').click(function() {
var searchTerm = $('#search').val();
console.log(searchTerm);
//clears text in search box
for (var i=0; i<validCountriesArray.length; i++){
if (searchTerm.toLowerCase() == validCountriesArray[i].toLowerCase()){
//.toLowerCase unifies & converts user input to lowercase
console.log("Good pick!" + searchTerm);
invalidPopoverHide();
}
else {
invalidPopoverShow();
}
}
$("#search").val("");
});
//=====WHY DOESNT THE FIRST invalid SEARCHterm WORK??????=====//
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src='http://code.jquery.com/jquery-2.1.3.min.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<style>
#closeBtn, #searchBtn{
background-color: #180D01;
color: #fed136;
}
#closeBtn, #searchBtn:hover{
color: #180D01;
background-color: #fed136;
}
</style>
<div class="form-group">
<label for="test" class="col-sm-3 control-label">Search a country!</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="search" placeholder="Enter A Country">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-6 col-sm-3">
<!--==============SEARCH BUTTON ===============-->
<a href="#" tabindex="0" role="button" class="btn btn-default" id="searchBtn" data-container="body" data-toggle="popover" >Search</a>
</div>
</div>
<script>
$( document ).ready(function() {
//CASE SENSITIVE!!!
var validCountriesArray = [
"Sweden",
"France",
"Germany",
"United States", "usa",
"Austria",
"Switzerland",
"Denmark",
"Great Britain", "england", "UK", "U.K.",
"West Germany",
"United Team of Germany",
"Soviet Union", "Russia",
"Netherlands",
"Spain"];
function invalidPopoverShow(){
$('[data-toggle="popover"]').popover({
placement: "right",
trigger: "focus",
content: "Choose a valid country that had Dressage/Equestrain participants in the Olympics! (Click anywhere to make popover disappear)",
});
}
function invalidPopoverHide(){
$('[data-toggle="popover"]').popover('hide');
}
////========================
$('#searchBtn').click(function() {
var searchTerm = $('#search').val();
console.log(searchTerm);
//clears text in search box
for (var i=0; i<validCountriesArray.length; i++){
if (searchTerm.toLowerCase() == validCountriesArray[i].toLowerCase()){
//.toLowerCase unifies & converts user input to lowercase
console.log("Good pick!" + searchTerm);
invalidPopoverHide();
}
else {
invalidPopoverShow();
}
}
$("#search").val("");
});
//=====WHY DOESNT THE FIRST invalid SEARCHterm WORK??????=====//
});
</script>
</body>
</html>