javascript - .getJSON() 中的 jQuery text()

标签 javascript jquery html

<分区>

我正在尝试从 Pokemon API 中获取名称并将其放入 html 中的 div 字段中,但是当我将它放入.getJSON 函数。只是好奇这个问题是什么?谢谢。

<div class="container">
    <div class="row">
        <div class="col-sm-3" id="1">
            <div id="name1"></div>
        </div>
        <div class="col-sm-3" id="2">
            <div id="name2"></div>
        </div>
        <div class="col-sm-3" id="3">
            <div id="name3"></div>
        </div>
        <div class="col-sm-3" id="4">
            <div id="name4"></div>
        </div>
     </div>
  </div>

JavaScript 代码

$(document).ready(function() {
/*Works*/
for(var j = 1; j < 5; j++){
    $("#name" + j).text("HELLO");
}
/*Doesn't work*/
for(var j = 1; j < 5; j++){
    var webAddress2 = "http://pokeapi.co/api/v1/pokemon/" + j;
    $.getJSON(webAddress2, function(data) {
        console.log("test");
        $("#name" + j).text("SOME TEXT");
    });
}
});

最佳答案

在循环内创建一个闭包。由于 getJSON 是一个异步操作,循环将完成它的执行,而无需等待 getJSON 完成它的每次执行。

你需要用闭包绑定(bind)j的值

$(document).ready(function() {
  for (var j = 1; j < 5; j++) {
    (function(index) {
      var webAddress2 = "http://pokeapi.co/api/v1/pokemon/" + index;
      $.getJSON(webAddress2, function(data) {
        console.log("test");
        $("#name" + index).text("SOME TEXT");
      });
    }(j))
  }
});

关于javascript - .getJSON() 中的 jQuery text(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39115767/

相关文章:

javascript - XMLHTTP ReadyState 3 未在 Webkit 中更新

javascript - 如何让 window.onbeforeunload 等待动画?

jquery - 以模态自动播放 Youtube 视频? (Avada Wordpress 主题)

javascript - Ajax 获取表单数据和 url

javascript - 插入笑脸文字并播放图像

javascript - 浏览器扩展程序,以替换实时站点上的JavaScript文件以进行测试

javascript - 在 Vue.js 中随机播放两个 json 文件的内容

javascript - 如何在鼠标不动时隐藏视频全屏控件?

javascript - Log4JavaScript服务器端接收

javascript - 为教育形式创建可解锁的内容