Question

我正在尝试从youtube api获取一些数据，并在我的网页上显示相同的数据。

但由于某种原因，我在getJSON的回调中更改的DOM不会改变。在控制台中，当我打印$ el时，我可以在变量中看到html代码。但它并没有显示在页面上，也没有显示在视图源（元素）选项卡中。

我无法在其中添加类，删除类或任何DOM操作。我对此感到好奇，因为我在其他地方使用了同样的东西并且它起作用了。

如果在页面加载后，我通过在命令行中运行此函数来做同样的事情，它可以正常工作。

以下是我尝试使用的代码：

get_ytube = function(els){
    var $els = $(els)
    $.each($els, function(i, v) {
        var $v = $(v)
        var id = $v.data("link-id")

        var url = "http://gdata.youtube.com/feeds/api/videos/" + id + "?v=2&alt=jsonc"

        $.getJSON(url, function(json) {
            var $el = $v

            $("<h5 class='title'>" + json.data.title + "</h5>" + 
                "<p class='desc'>" + json.data.description + "</p>").appendTo($el)
            console.log($el[0])
        });
    })
}

Answer 1

也许你只需要在窗口加载后执行它？

$( document ).ready(function() {
  // put your code here
});

实际上仔细观察它看起来你只是缺少一堆分号，所以javascript正在错误地解释你的代码。这篇文章解释了为什么Do you recommend using semicolons after every statement in JavaScript?。

我添加了它们并自己尝试了它对我有用。看一下这个http://jsfiddle.net/gx3Us/。

var get_ytube = function(els) {
    var $els = $(els);
    $.each($els, function(i, v) {        
        var $v = $(v);
        var id = $v.data("link-id");
        var url = "http://gdata.youtube.com/feeds/api/videos/" + id + "?v=2&alt=jsonc";
        $.getJSON(url, function(json) {
            var $el = $v;
            $("<h5 class='title'>" + json.data.title + "</h5>" + "<p class='desc'>" + json.data.description + "</p>").appendTo($el);
            console.log($el[0]);
        });
});

}

DOM在getJSON回调中发生变化

1 个答案: