0
jQuery的新手。我试图在用户输入相应的城市时更改背景（刚开始与NYC和SF一起测试）。到目前为止，这似乎不起作用。我尝试了一些东西，但没有运气。我有preventDefault在那里，所以我不认为这是一个页面刷新问题（原谅我的新手术语）。在控制台更改用户提交的背景？
来看，它说，“约克”没有定义，但是，我需要设置所有可能的用户的答案？我只使用过去的数字，所以任何帮助将不胜感激。提前谢谢了。
下面的代码：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="css/reset.css">
<link type="text/css" rel="stylesheet" href="css/style.css">
<meta charset="utf-8">
<meta name="description" content="Citipix Website">
<meta name="keywords" content="citipix, images, changes">
<meta name="author" content="Chantel Zapata"/>
<title>City Background</title>
<script src='http://code.jquery.com/jquery-latest.min.js'></script>
</head>
<body>
<header>
<div class="title">
<h1>CitiPix</h1>
<p>Your Cities, Your Pix</p>
</div>
</header>
<div class="container">
<form class="entry">
<input type="text" id="city-type" placeholder="Enter a city name...">
<input type="submit" value="Update" id="submit-btn">
</form>
</div>
<script src="js/index.js"></script>
</body>
</html>
CSS：
/*
Project Name: Blank Template
Client: Your Client
Author: Your Name
Developer @GA in NYC
*/
/******************************************
/* SETUP
/*******************************************/
/* Box Model Hack */
* {
-moz-box-sizing: border-box; /* Firexfox */
-webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
box-sizing: border-box; /* IE */
}
/* Clear fix hack */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clear {
clear: both;
}
.alignright {
float: right;
padding: 0 0 10px 10px; /* note the padding around a right floated image */
}
.alignleft {
float: left;
padding: 0 10px 10px 0; /* note the padding around a left floated image */
}
/******************************************
/* BASE STYLES
/*******************************************/
body {
color: #000;
font-size: 12px;
line-height: 1.4;
font-family: Helvetica, Arial, sans-serif;
background: url(../images/citipix_skyline.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/******************************************
/* LAYOUT
/*******************************************/
/* Center the container */
.container {
width: 720px;
margin: auto;
padding-top: 40px;
}
header {
background: rgba(0,0,0, .5);
padding: 20px 0;
}
.title {
text-align: center;
color: #fff;
font-size: 35px;
font-weight: bold;
font-family: helvetica, arial, sans-serif;
letter-spacing: 1px;
}
.title p {
font-size: 17px;
font-weight:lighter;
letter-spacing: 0;
}
#city-type {
color: #6b6b6c;
font-size: 32px;
background: #fff;
border: 1px solid #111;
padding: 0px 30px;
display: inline-block;
width: 450px;
font-family: helvetica, arial, sans-serif;
height: 72px;
line-height: 72px;
vertical-align: middle;
font-weight: lighter;
}
#submit-btn {
background: #000;
color: #fff;
letter-spacing: 1px;
font-size: 25px;
font-weight: bold;
text-transform: uppercase;
border: 1px solid #111;
text-align: center;
display: inline-block;
width: 250px;
height: 72px;
line-height: 68px;
vertical-align: middle;
font-family: helvetica, arial, sans-serif;
cursor: pointer;
}
#submit-btn:hover {
background: #333;
}
.nyc {
background-image: url(../images/nyc.jpg)
}
.sf {
background-image: url(../images/sf.jpg)
}
.la {
background-image: url(../images/la.jpg)
}
.austin {
background-image: url(../images/austin.jpg)
}
.sydney {
background-image: url(../images/sydney.jpg)
}
/******************************************
/* ADDITIONAL STYLES
/*******************************************/
的jQuery：
$('.entry').on('submit', function(event){
e.preventDefault();
showCity();
})
function showCity() {
var userEntry = $('#city-type').val();
var newYork = ["New York", "New York City", "NYC"];
var sanFran = ["San Francisco", "SF", "Bay Area"];
var losAngeles = ["Los Angeles", "LA", "LAX"];
var austin = ["Austin", "ATX"];
var sydney = ["Sydney", "SYD"];
//console.log(userEntry);
if(userEntry === newYork[0]; || userEntry === newYork[1]; || userEntry === newYork[2];) {
$('body').css('background','url(../images/nyc.jpg)').fadeIn(700);
} else if(userEntry === sanFran[0]; || userEntry === sanFran[1]; || userEntry === sanFran[2];) {
$('body').css('background','url(../images/sf.jpg)').fadeIn(700);
} else if(userEntry === losAngeles[0]; || userEntry === losAngeles[1]; || userEntry === losAngeles[2];) {
$('body').css('background','url(../images/la.jpg)').fadeIn(700);
} else if(userEntry === austin[0]; || userEntry === austin[1];) {
$('body').css('background','url(../austin.jpg)').fadeIn(700);
} else if(userEntry === sydney[0]; || userEntry === sydney[1];) {
$('body').css('background','url(../images/sydney.jpg)').fadeIn(700);
}
$('userEntry').val('');
};
$('#submit-btn').on('submit', showCity);
啊！我忘了==！我现在将执行这一改变。非常感谢:) – NicoleZ
@ChantelN没问题！如果解决您的问题，可随时将其标记为答案:) – MortenMoulder
可悲的是没有做到这一点:( – NicoleZ