Прикрепление изображения src из объекта json с помощью jQuery - PullRequest
Новая
       5

Прикрепление изображения src из объекта json с помощью jQuery

0 голосов
/ 06 мая 2011

Я пытаюсь извлечь контент из объекта 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"
}

Ответы [ 3 ]

2 голосов
/ 07 мая 2011

Сначала этот код: 

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

Вернет массив всех imgs, созданных в цикле each (). Возможно, вы хотели сделать значение класса для первого 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>';
0 голосов
/ 07 мая 2011

Я полагаю, проблема в том, что вы создаете несколько элементов div для записи класса, а затем присваиваете img src элементу div каждый раз, когда просматриваете свой код. Вместо вызова функции createurl добавьте эту строку: 

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

и уберите функцию

0 голосов
/ 07 мая 2011

Вы должны сделать это так: 

$(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.
Надеюсь это поможет. Приветствия

...