Question

我需要动态地使用div id更改span标记内的div标记的内容。我试过这段代码，但它没有用。我认为$('#'+ids[i])存在问题。即使我正确地获取每个id的信息。请提出任何建议。

JavaScript的：

var ids = ["Of0UWpK5bEo","1qYMJjTxJnM","8aAab7gxbEg","ZEd6aKdeC8g","qQcFvamzdno","yovbI8DOMpk"];
for (i = 0; i < ids.length; i++) {
    $.get("https://www.googleapis.com/youtube/v3/videos?part=snippet,statistics&id="+ ids[i] + "&key=AIzaSyDEm5wGLsWi2G3WG40re-DAJcWioQSpJ6o", function(data){
        $('#'+ids[i]).parent().find('.caption').text(data.items[0].snippet.title);
    });
}

HTML：

<div id="Of0UWpK5bEo" class="status">
    <img src="http://img.youtube.com/vi/Of0UWpK5bEo/0.jpg" height="100px" width="100px"/>
    <span class="caption">Text below the image</span>
</div>

Answer 1

我发现它是变量范围的问题。

这可以通过使用匿名函数来解决。

将循环变量i传递给匿名函数，以便在函数内部可以访问ii。

查看此fiddle。

以下是摘录。

＆＃13;

var ids = ["Of0UWpK5bEo", "1qYMJjTxJnM", "8aAab7gxbEg", "ZEd6aKdeC8g", "qQcFvamzdno", "yovbI8DOMpk"];
var i;
for (i = 0; i < ids.length; i++) {

  (function(ii) {       // collect into 'ii' here
    $.get("https://www.googleapis.com/youtube/v3/videos?part=snippet,statistics&id=" + ids[ii] + "&key=AIzaSyDEm5wGLsWi2G3WG40re-DAJcWioQSpJ6o", function(data) {
      $('#' + ids[ii]).html(data.items[0].snippet.title);
    });
  }(i));     //pass 'i' here

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Of0UWpK5bEo" class="status">
  <img src="http://img.youtube.com/vi/Of0UWpK5bEo/0.jpg" height="100px" width="100px" />
  <span class="caption">Text below the image</span>

</div>

＆＃13;

Answer 2

您需要的是：

$('#'+ids[i]).find('.caption').text(...);

因为.caption是有问题的ID的子项。因此，.parent()不是必需的。

A Demo

另外，在循环中使用var，如下所示。您无缘无故地创建全局，否则。

for (var i = 0; i < ids.length; i++) {

事实证明，由于async的{{1}}行为和循环是同步的。所以，你的循环已经完成了运行，而你可能正处于第一或第二个ajax请求。您需要做的是将$.get()值（基于id）的范围放入ajax请求中，可能是通过创建一个闭包，如下所示。

＆＃13;

var ids = ["Of0UWpK5bEo","1qYMJjTxJnM","8aAab7gxbEg"];

for (var i = 0; i < ids.length; i++) {
    (function(id) {
        $.get("https://www.googleapis.com/youtube/v3/videos?part=snippet,statistics&id="+ id + "&key=AIzaSyDEm5wGLsWi2G3WG40re-DAJcWioQSpJ6o", function(data) {
            $('#' + id).find('.caption').text(id); //use data.items[0].snippet.title instead of id
        });
    }(ids[i]));
}

＆＃13;

这是使用小提琴回声apis的working demo。

Answer 3

这段代码不是最好的，但我可以解释发生了什么。

您的根本问题是“i”的值不再是您所期望的。当AJAX函数的结果完成时，它是一个未定义的值。执行此操作的正确方法是使用迭代器：

$.each(ids, function(index, id) {
    $.get("..." + id + "...", function(data) {
        $("#" + id).parent().find('.caption').text(data.items[0].snippet.title);
    });
});

另外，请确保您的代码位于“document.ready（）”块中，否则您可能无法找到这些元素：

$(document).ready(function() {
    $.each(ids, function(index, id) {
        $.get("..." + id + "...", function(data) {
            $("#" + id).parent().find('.caption').text(data.items[0].snippet.title);
        });
    });
});

话虽这么说，这看起来应该是在Javascript中动态创建的界面。这样就可以避免许多问题，即在标签中匹配ID并搜索兄弟标签，因为你已经有了参考。

工作小提琴：https://jsfiddle.net/x7v2zt6f/

这是一个稍微好一点的动态创建图像和标题的版本。它包含将文本限制为20个字符的代码：here

使用动态ID

3 个答案: