Использовать переменную javascript как img src

Question

Я использую facebook Api, чтобы получить названия альбомов и их обложки. Из этих имен и фотографий я пытаюсь создать страницу jquery Mobile, которая представляет их в списке.

Некоторые из моего яваскрипта кода выглядит следующим образом:

// Additional initialization code such as adding Event Listeners goes here 
      FB.api('593959083958735/albums', function(response) { 
       if(!response || response.error) { 
        // render error 
        alert("Noo!!"); 
       } else { 
        // render photos 
        for(i=0; i<response.data.length; i++){ 
         albumName[i] = response.data[i].name; 
         albumCover[i] = response.data[i].cover_photo; 
         albumId[i] = response.data[i].id; 

         FB.api(albumCover[i], function(response) { 
          if(!response || response.error) { 
           // render error 
           alert("Noo!!"); 
          } else { 
           // render photos 
           document.getElementById('coverPhoto').src = response.picture; 
          } 
         }); 


         $("ul").append('<li>'+ 
         '<a href="testFile.HTML" data-transition="slidedown">'+ 
          '<img src= "nothing.jpg" id = "coverPhoto" />'+ 
          '<h2>' + albumName[i] + '</h2>'+ 
          '<p> Test Paragraph</p>'+ 
         '</a>'+ 
         '</li>') 
        .listview('refresh'); 

        } 
       } 
      }); 

AlbumName[] Массив имеет название альбомов, и repsonse.picture имеет титульную картину каждый альбома.

Как вы можете видеть, тогда я динамически создаю listView с именами и изображениями, которые я получаю от вызова. Однако результат THIS. Названия альбомов все в порядке, но фотографии перепутаны. На вкладке «Сеть» я вижу, что я получаю все обложки из альбомов. Но кажется, что я перезаписываю обложку только в первой ячейке спискаView. Но почему?

Answer 1

Вопрос путь вы рендеринга фотографии. Вы выбираете элемент по ID, но все элементы имеют одинаковый идентификатор. Каждый элемент должен иметь уникальный идентификатор, иначе ваш селектор не будет работать.

Вы должны сделать фотографию в своем шаблоне вместо визуализации шаблона, а затем заменить src изображения. Может быть, что-то вроде этого:

// Additional initialization code such as adding Event Listeners goes here 

var albums; // a place to get album info outside this function 

FB.api('593959083958735/albums', function(response) { 
    if(!response || response.error) { 
    // render error 
    alert("Noo!!"); 
    } else { 
    // render photos 
    for(i=0; i<response.data.length; i++){ 
     albums[albumID] = response.data[i] // for accessing the album info eslewhere 

     var albumName = response.data[i].name; 
     var albumCover = response.data[i].cover_photo; 
     var albumID = response.data[i].id; 

     FB.api(albumCover, function(response) { 
     if(!response || response.error) { 
      // render error 
      alert("Noo!!"); 
     } else { 
      // render photos 
      $("ul").append('<li>'+ 
      '<a href="testFile.HTML" data-transition="slidedown">'+ 
      '<img src="'+response.picture+'" id="coverPhoto-'+albumID+'" />'+ 
      '<h2>'+albumName+'</h2>'+ 
      '<p>Test Paragraph</p>'+ 
      '</a>'+ 
      '</li>') 
      .listview('refresh'); 
     } 
     }); 
    } 
    } 
}); 

Answer 2

Вы даете тот же идентификатор для каждого <img>:

<img src= "nothing.jpg" id = "coverPhoto" /> 

ID должен быть уникальным

Answer 3

Как заявил Dark Falcon, идентификаторы должны быть уникальными.

попробовать что-то вдоль этих линий:

... 
'<img src="nothing.jpg" id="coverPhoto'+i+'" />'+ 
... 

И в вашей загрузки кода:

(function(i) { 
    FB.api(albumCover[i], function(response) { 
     if(!response || response.error) { 
      // render error 
      alert("Noo!!"); 
     } else { 
      // render photos 
      document.getElementById('coverPhoto'+i).src = response.picture; 
     } 
    }); 
})(i); 

Answer 4

Как было сказано, идентификатор должен быть уникальным, вы должны указать класс для каждого элемента вместо этого, с JQuery он должен выглядеть следующим образом:

$(".coverPhoto").each(function(index) { 
     this.src = response.picture; 
    ); 
}); 

Где coverPhoto ваш класс ,