我不得不为课程做一个任务,由于某种原因我无法让jQuery Mobile工作。我按照教授的要求写了一切,但它仍然没有出现。应该有一个jQuery Mobile页眉和页脚,在滚动时始终保持在屏幕上,但它不显示。这是所有相关代码。
<!DOCTYPE html>
<html>
<head>
<title>Homework 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script>
var key = "";
var URL = "";
var zip = "";
var weather = 0;
//sets the sip variable to the given zipcode
function setZip(temp) {
zip = temp;
}
//sets the weather variable to the given object
function setWeather(temp) {
weather = temp;
}
//generates and displays hourly weather
function generateContent() {
//resets the div element, so the previous content is replaced, and not built upon
document.getElementById("contents").innerHTML = "";
key = document.getElementById("key").value;
URL = "http://api.wunderground.com/api/" + key + "/geolookup/q/autoip.json";
//used to locate the zipcode value
$.ajax({
type: "GET",
url: URL,
dataType: "jsonp",
success: function (msg) {
if (msg.response.error == undefined)
setZip(msg.location.zip);
else {
alert("Error");
return;
}
},
error: function (jgXHR, textStatus, errorThrown) {
alert("Error: " + textStatus + " " + errorThrown);
return;
}
});
URL = "http://api.wunderground.com/api/" + key + "/hourly/q/" + zip + ".json"
//used to get the json hourly weather object that will be used for displaying the hourly weather
$.ajax({
type: "GET",
url: URL,
data: {},
dataType: "jsonp",
success: function (msg) {
setWeather(msg.hourly_forecast);
},
error: function (jgXHR, textStatus, errorThrown) {
alert("Error: " + textStatus + " " + errorThrown);
return;
}
});
//for loop that cycles through all weather elements, and displays their time, date, and the icon for the weather
for (var i = 0; i < weather.length; i++) {
var time = weather[i].FCTTIME.hour_padded;
var timeZone = weather[i].FCTTIME.tz;
var date = weather[i].FCTTIME.month_name + " " + weather[i].FCTTIME.mday + ", " + weather[i].FCTTIME.year;
//var icon = weather[i].icon + "<img src='" + obj[i].icon_url + "' alt='icon'>
var text = time + ":00" + " " + timeZone + " on " + date + " ";
var icon = document.createElement("img");
icon.src = weather[i].icon_url;
//used to append created elements onto the empty div element
var paragraph = document.createElement("p").appendChild(document.createTextNode(text));
document.getElementById("contents").appendChild(paragraph);
document.getElementById("contents").appendChild(icon);
document.getElementById("contents").appendChild(document.createElement("br"));
}
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed"><h1>Assignment 2</h1></div>
<div data-role="content">
<p>Input Wunderground key to see the hourly weather in your area.</p>
<input id="key" type="text" />
<br />
<button onclick="generateContent()">Get the Weather!</button>
<br /> <br />
<div id="contents"></div> <br />
</div>
<div data-role="footer" data-position="fixed"><h1>CS275</h1></div>
</div>
</body>
</html>
请让我知道代码中是否有任何遗漏,因为我老实说也看不出有什么问题,虽然我会说实话,到目前为止,我在网络开发方面并不是那么出色,所以我可能只是遗漏了一些东西这里很简单。谢谢您的帮助。
解决了它。我在元标记下方的顶部包含了错误的链接。我应该包括:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>