Question

我正在尝试从JSON对象中检索内容并将其显示在页面上。我能够检索对象并迭代以提取各种内容并显示div的块。目标是显示图像头像，名字和姓氏。使用下面的代码，我可以显示名字和姓氏，但图像总是显示为每个图像列表中的最后一个图像。如何获取URL并将其附加到我在每个div中创建的图像？

$(document).ready(function() {
    $.getJSON('http://www.url.com/?callback=?', function(data) {
       $.each(data, function(index, entry) {
            var html = '<div class="entry">';
            html += '<img/>';
            var createImageURL = function() {
                var thisImg = entry.AvatarUrl;
                var thisPic = $('.entry img');  
                $(thisPic).attr('src',thisImg);
            }
            createImageURL();   
            html += '<h3 class="first-name">' + entry.FirstName + '</h3>';
            html += '<div class="last-name">' + entry.LastName + '</div>';

            html += '</div>';
            $('#dictionary').append(html);
       });
     });
 });

以下是JSON数据的示例：

{
"AvatarUrl":"http://www.gravatar.com/avatar/35b2d5391e4a766e57d0d1f4a767f61f?s=120&d=retro",
"Id":4,
"FirstName":"Aimee",
"LastName":"Lacariere",
"Location":"Seattle, Washington"
}

Answer 1

首先关闭此代码：

var thisPic = $('.entry img');

将返回在each（）循环中创建的所有imgs的数组。也许你的意思是让第一个div上的类值唯一？

但实际上你不需要调用函数来设置属性。只需将其直接添加到字符串中：

var html = '<div class="entry">';
html += '<img src="' + entry.AvatarUrl + '" alt="avatar" />';
html += '<h3 class="first-name">' + entry.FirstName + '</h3>';
html += '<div class="last-name">' + entry.LastName + '</div>';
html += '</div>';

Answer 2

你应该这样做：

$(document).ready(function() {
    $.getJSON('http://www.url.com/?callback=?', function(data) {
       $.each(data, function(index, entry) {
            $html = $('<div class="entry" />');
            $html.append('<img/>');
            var createImageURL = function() {
                var thisImg = entry.AvatarUrl;
                var thisPic = $('.entry img', $html);  //This was your most conflicting line
                $(thisPic).attr('src',thisImg);
            }
            createImageURL();   
            $html.append('<h3 class="first-name">' + entry.FirstName + '</h3>');
            $html.append('<div class="last-name">' + entry.LastName + '</div>');

            $('#dictionary').append($html);
       });
     });
 });

如您所见，我们使用的是append而不是连接。您的错误位于var thisPic = $('.entry img');选择器中，因为它将搜索所有文档。惠特：

$('.entry img', $html);

我们只选择刚刚创建的html中的图像希望这可以帮助。干杯

Answer 3

我相信问题是你正在创建类条目的多个div，然后在每次循环代码时将img src重新分配给div。而不是调用createurl函数添加这一行：

html += '<img src="' + entry.AvatarUrl + '"/>';

并删除功能

使用jQuery从json对象附加图像src

3 个答案: