jQuery 新手。当用户在各自的城市中键入内容时，我正在尝试更改背景(刚开始使用纽约市和旧金山进行测试)。到目前为止，这似乎不起作用。我尝试了几件事，但没有运气。我在那里设置了 preventDefault，所以我认为这不是页面刷新问题(请原谅我的新手行话)。
查看控制台，它说“york”未定义，但是，我是否需要设置所有可能的用户答案？我过去只处理过数字，因此我们将不胜感激。非常感谢。
代码如下:
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);
最佳答案
与其将所有城市创建为单独的变量，不如考虑使用数组来控制这些:
var city = ['NYC', 'SF', 'LA', 'ATX', 'SYD']
此外，您可以考虑使用 Switch statements，而不是使用多个 if-else 测试。和 $.attr 通过您的 CSS 类相应地更改背景。
switch (cityPic) {
case 'NYC':
$('body').attr('class','nyc');
break;
case 'SF':
$('body').attr('class','sf');
break;
case 'LA':
$('body').attr('class','la');
break;
case 'ATX':
$('body').attr('class','austin');
break;
case 'SYD':
$('body').attr('class','sydney');
break;
default:
}
关于javascript - 更改用户提交的背景？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35515131/