"参考错误:$ not defined" Visual Studio Code中的Jquery

时间:2018-02-02 15:10:36

标签: javascript jquery css

我在.js文件中的$(document).ready()函数上收到错误。我已经添加了库并正在使用http服务器。我不确定在哪里搜索,因为我已经尝试了过去几天我在网上找到的所有解决方案。我最近从CodePen转到了VS Code。

这是HTML:

    <!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" href="script.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">

<title>Local Weather</title>
</head>
<body>
    <div class="box">
        <div id="temp">
            <button onclick="cTemp()">C</button>
            <button onclick="fTemp()">F</button>
        </div>
            <div id="location"></div>
            <div id="weather"></div>
    </div>
</body>
</html>

这是JS:

    var farTemp, celTemp;
var lat, long;

$(document).ready(function() {
    function getLocation() {
        if (navigator.geolocation) {
              navigator.geolocation.getCurrentPosition(function(position) {

                // set variables to obtained location from above
                lat = position.coords.latitude;
                long = position.coords.longitude;

                // set JSON data to location variables, "lat" and "long" after converting to string for URL
                $.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=" + String(lat) + "&lon=" + String(long), function(json) {

                // temp variables and conversion rounded to nearest whole number
                farTemp = Math.floor(json.main.temp * 1.8 + 32);
                celTemp = JSON.stringify(Math.floor(json.main.temp));
                // output data
                document.getElementById("location").innerHTML = json.name;
                document.getElementById("temp").innerHTML = farTemp;
                document.getElementById("weather").innerHTML = json.weather[0].description;
            }); 
        }); 
    }
}
});

// output temperautre in F
function fTemp() {
    document.getElementById("temp").innerHTML = farTemp + "°F";
} // close fTemp
// output temperature in C
function cTemp() {
    document.getElementById("temp").innerHTML = celTemp + "°C";
} // close cTemp
// get location

fTemp();
cTemp();

这是CSS:

   .box {
  text-align: center;
  font-size: 24px;
  color: #5c85d6;
  margin-top: 20%;
}

button {
  background-color: #79d2a6;
  color: #fff;
  border-radius: 4px;
  border: none;
  margin-right: 4px;
}

0 个答案:

没有答案