文档就绪后更新全局变量并通过JQuery修改HTML的问题求助

Hey there! I see where the issues are with your code—let's work through them together:

核心问题1：异步操作的时序问题 #

$.get 是异步AJAX请求，它会在后台运行，而代码的其他部分会继续执行。现在你的 $(document).ready 代码块会早于API请求完成前执行，所以当你尝试设置 $("#trial").html(city) 时，city 变量还是你初始化时的空字符串。

核心问题2：变量赋值错误 #

你把 $("#city").html(...) 的结果赋值给了 city 变量，但这个jQuery方法返回的是jQuery对象本身（不是你刚插入的文本内容）。所以你并没有把城市字符串存在变量里，而是存了一个DOM元素的引用。

修正后的代码 #

下面是修复后的完整代码，我会标注关键改动：

JavaScript #

var city = "";

// 先等待DOM加载完成
$(document).ready(function() {
  // 页面就绪后再发起API请求
  $.get("https://api.ipdata.co", function (response) {
    // 先把需要的城市字符串存到变量里
    city = response.city + ", " + response.region;
    
    // 用变量更新#city元素的内容
    $("#city").html(city);
    
    // 现在city变量已经有正确值了，可以直接使用
    // （接下来调用天气API的代码也应该放在这个回调里！）
    $("#trial").html(city);
  }, "jsonp");
});

CSS #

body {
 background-color: #000000;
 color: white;
 text-align: center;
}
.title {
 font-size: 66px;
 margin-top: 5px;
 font-weight: 500;
}
#city {
 font-size: 33px;
}
#trial {
 color: red;
}

HTML #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
 <h1 class="title"> Weather App </h1>
 <div id="city"></div>
 <h1 id="trial">yy</h1>
</div>

关键说明 #

• 把 $.get 请求放到 $(document).ready 里，确保DOM完全加载后再操作元素。
• 先将真实的城市字符串（response.city + ", " + response.region）存入 city 变量，再用这个变量更新DOM元素。
• 所有依赖 city 值的代码（比如你后续要调用的天气API）都应该放在AJAX的回调函数里——这样能保证只有在成功获取到城市数据后才执行这些代码。

内容的提问来源于stack exchange，提问作者sinan