使用javascript變量作爲img src

我正在使用Facebook Api獲取一些相冊名稱及其封面照片。從這個名字和照片我試圖創建一個jQuery的移動頁面，在列表中顯示它們。使用javascript變量作爲img src

我的一些JavaScript代碼如下所示：

// 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是結果。專輯的名稱都可以，但是照片混亂了。在「網絡」標籤上，我看到我收到了相冊中的所有封面照片。但它似乎只覆蓋listView的第一個單元格中的封面照片。爲什麼？

來源

2013-06-19 Johny Jaz

HTML ID必須是唯一的。 –

的問題是你呈現照片的方式。您按ID選擇元素，但所有元素都具有相同的ID。每個元素應該有一個唯一的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'); 
     } 
     }); 
    } 
    } 
});

來源

2013-06-19 15:25:00 Andrew

那麼，如果我這樣做，就像你說的那樣，這不是一個真正的id的理由？但爲什麼「照片」變量似乎在那裏是空的？它是一個全局變量，但仍然在函數之外似乎是空的。這是正常的行爲嗎？我正在嘗試做你說的，但是當我嘗試追加時，變量是「未定義的」。 –

...我不知道facebook API。這個函數是異步的嗎？如果是這樣，你需要在通話中移動你的渲染。 – Andrew

是的，它是異步的！但是如果你把append放在else裏面，那麼照片就可以按你的建議工作，但是AlbumName超出了範圍，所以是undefined：p。哈哈我不明白爲什麼他們超出了範圍，但？通過我的編程經驗（不是js！），他們應該在範圍內..我在這裏錯過了什麼？ –

你把相同的ID給每個<img>：

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

ID必須是唯一的

來源

2013-06-19 15:22:11

是的，你是絕對正確的。我正試圖解決這個問題。非常感謝你的回答 –

如前所述由暗隼，ID必須是唯一的。

嘗試一些沿着這些路線：

... 
'<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);

來源

2013-06-19 15:23:06

正如有人說的ID必須是唯一的，你應該指定每個元素的類代替，用jQuery它必須看起來像這樣：

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

哪裏coverPhoto是你的類。

來源

2013-06-19 15:27:01 Pak

使用javascript變量作爲img src

回答

相關問題