Question

点击之前：

点击后：

＆＃13;

$(document).ready(function () {
            var output = document.getElementById("whole");
            if (!navigator.geolocation) {
                $("#whole").html("<p>Your brower is not supported</p>");
                return;
            }

            function success(position) {
                var lan = position.coords.latitude;
                var lon = position.coords.longitude;

                $.ajax({
                    url: "http://api.openweathermap.org/data/2.5/weather?lat=" + lan + "&lon=" + lon + "&APPID=f06e25b1205b65171ad01524870cbb01",
                    success: function (data) {
                        $("#temp").text(Math.round(data.main.temp - 273.15));
                    }
                });
            }

            function error() {
                output.innerHTML = "Unable to retrieve your location";
            }

            navigator.geolocation.getCurrentPosition(success, error);

            var ce = parseInt($("#temp").text(), 10);
            var fa = Math.round(ce * 1.8 + 32);

            $("a").on("click", function () {
                if ($(this).text() == "℃") {
                    $(this).html("℉");
                    $("#temp").text(fa);
                } else {
                    $(this).html("℃");
                    $("#temp").text(ce);
                }
            });

        });

＆＃13;

<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
 <span id="temp"></span><a id="toggle" href="javascript:void(0)">℃</a>

＆＃13;

我想实现这一目标，当我点击Celcius角色时，Celius度将变为华氏度。因为代码需要位置，所以运行代码段会引发错误。我不知道为什么会这样是NaN.But没有工作。为什么呢？

Answer 1

这些变量不是全局变量，因为它们是在ready函数的范围内声明的。

直接使用他们的名字（没有window ），因为click处理程序也在同一范围内。

document).ready(function () {
    var ce = parseInt($("#temp").text(), 10);
    var fa = Math.round(ce * 1.8 + 32);

    $("a").on("click", function () {
        if ($(this).text() == "℃") {
            $(this).html("℉");
            $("#temp").text(fa);
        } else {
            $(this).html("℃");
            $("#temp").text(ce);
        }
    });
});

<强>更新

问题是#temp元素在运行代码时没有值，因为它是从AJAX调用填充的（是异步的，稍后会完成 ）

您应该将解析代码放在AJAX的成功回调中。

$(document).ready(function () {
            var output = document.getElementById("whole");
            var ce, fa;
            if (!navigator.geolocation) {
                $("#whole").html("<p>Your brower is not supported</p>");
                return;
            }

            function success(position) {
                var lan = position.coords.latitude;
                var lon = position.coords.longitude;

                $.ajax({
                    url: "http://api.openweathermap.org/data/2.5/weather?lat=" + lan + "&lon=" + lon + "&APPID=f06e25b1205b65171ad01524870cbb01",
                    success: function (data) {
                        ce = Math.round(data.main.temp - 273.15);
                        fa = Math.round(ce * 1.8 + 32);
                        $("#temp").text( ce );
                    }
                });
            }

            function error() {
                output.innerHTML = "Unable to retrieve your location";
            }

            navigator.geolocation.getCurrentPosition(success, error);

            $("a").on("click", function () {
                if ($(this).text() == "℃") {
                    $(this).html("℉");
                    $("#temp").text(fa);
                } else {
                    $(this).html("℃");
                    $("#temp").text(ce);
                }
            });

        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="temp"></span><a id="toggle" href="javascript:void(0)">℃</a>

Answer 2

试试这个。检查此Link

 <span id="temp">178</span><a id="toggle" href="javascript:void(0)">℃</a>
    window.ce;
    window.fa;
$(document).ready(function () {
         ce = parseInt($("#temp").text(), 10);
         fa = Math.round(ce * 1.8 + 32);
        $("a").on("click", function () {
            if ($(this).text() == "℃") {
                $(this).html("℉");
                $("#temp").text(window.fa);
            } else {
                $(this).html("℃");
                $("#temp").text(window.ce);
            }
        });
    });

为什么有NaN？

2 个答案: