文章/答案/技术大牛

发布

问Json "for“循环
EN

Stack Overflow用户

提问于 2016-04-15 12:07:26

回答 2查看 103关注 0票数 2

我想把有关视频的信息放在#t1，#t2和#t3中，但是所有信息都放在#t3中。代码中的错误在哪里？

  $(function(){
        for (var i = 1; i < 4; i++) {
            var box = "#t" + i;
            var id = "dQw4w9WgXcQ";
          
            var img = "<img src='https://img.youtube.com/vi/" + id + "/default.jpg'>";
            console.log(i);

            $.getJSON('https://www.googleapis.com/youtube/v3/videos?part=statistics&id=' + id +  '&key=AIzaSyBlYMwv6QQ9x3r1ACVt1ZeyiRXiaGeKOBU', function(data) {

                $(box).prepend("viewCount: " + data.items[ 0 ].statistics.viewCount);


            });
            $.getJSON('https://www.googleapis.com/youtube/v3/videos?part=snippet&id=' + id + '&key=AIzaSyBlYMwv6QQ9x3r1ACVt1ZeyiRXiaGeKOBU', function(data) {
                $(box).prepend("<h3>" + "Title" + data.items[0].snippet.title + "</h3>");
                $(box).prepend("<h3>" + "Channel title" + data.items[0].snippet.channelTitle + "</h3>");
                $(box).prepend(img);
            });
        }
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<div id="t1"></div>
<div id="t2"></div>
<div id="t3"></div>

javascript

jquery

json

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-04-15 12:17:06

$.getJSON是异步的，接收到响应时将调用处理程序。但是for-loop不会等待处理程序被调用！

创建一个inner-function，并将i的值作为参数传递，因为i的值对于inner-function将是持久的。

$(function() {
  for (var i = 1; i < 4; i++) {
    var tobeCalled = function(i) {
      var box = "#t" + i;
      var id = "dQw4w9WgXcQ";
      var img = "<img src='https://img.youtube.com/vi/" + id + "/default.jpg'>";
      $.getJSON('https://www.googleapis.com/youtube/v3/videos?part=statistics&id=' + id + '&key=AIzaSyBlYMwv6QQ9x3r1ACVt1ZeyiRXiaGeKOBU', function(data) {
        $(box).prepend("viewCount: " + data.items[0].statistics.viewCount);
      });
      $.getJSON('https://www.googleapis.com/youtube/v3/videos?part=snippet&id=' + id + '&key=AIzaSyBlYMwv6QQ9x3r1ACVt1ZeyiRXiaGeKOBU', function(data) {
        $(box).prepend("<h3>" + "Title" + data.items[0].snippet.title + "</h3>");
        $(box).prepend("<h3>" + "Channel title" + data.items[0].snippet.channelTitle + "</h3>");
        $(box).prepend(img);
      });
    }
    tobeCalled(i);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<div id="t1">
  <h2>1</h2>
</div>
<div id="t2">
  <h2>2</h2>
</div>
<div id="t3">
  <h2>3</h2>
</div>

票数 1

Stack Overflow用户

发布于 2016-04-15 12:13:18

Closures...将所有内容封装在一个闭包中，这将为每次迭代创建一个新的scope。

$(function(){      
        for (var i = 1; i < 4; i++) {
          (function(i)
            var box = "#t" + i;
            var id = "dQw4w9WgXcQ";

            var img = "<img src='https://img.youtube.com/vi/" + id + "/default.jpg'>";
            console.log(i);

            $.getJSON('https://www.googleapis.com/youtube/v3/videos?part=statistics&id=' + id +  '&key=AIzaSyBlYMwv6QQ9x3r1ACVt1ZeyiRXiaGeKOBU', function(data) {

                $(box).prepend("viewCount: " + data.items[ 0 ].statistics.viewCount);


            });
            $.getJSON('https://www.googleapis.com/youtube/v3/videos?part=snippet&id=' + id + '&key=AIzaSyBlYMwv6QQ9x3r1ACVt1ZeyiRXiaGeKOBU', function(data) {
                $(box).prepend("<h3>" + "Title" + data.items[0].snippet.title + "</h3>");
                $(box).prepend("<h3>" + "Channel title" + data.items[0].snippet.channelTitle + "</h3>");
                $(box).prepend(img);
            });
        }
       })(i);
    });

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36646728

复制

相似问题

问Json "for“循环
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Json "for“循环EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Json "for“循环
EN