獲取與json img數組div

Question

我有一個link返回一個類似於下圖的圖像數組。

{ "imageUrl":"http://server06.amobee.com/aspx/nadav/test/banner320x50.png",    
"expandedImageUrl":"http://server06.amobee.com/aspx/nadav/test/banner320x320.jpg" } 

我的目標是在<div>顯示第一圖像，它被點擊時，它改變到第二圖像。

我該如何使用HTML和JavaScript來實現這個目標？

Answer 1

在普通的JavaScript，假設你已經有一個div聲明爲<div id=divId></div>：

var images = { 
    "imageUrl":"http://server06.amobee.com/aspx/nadav/test/banner320x50.png",    
    "expandedImageUrl":"http://server06.amobee.com/aspx/nadav/test/banner320x320.jpg" 
}; 
var div = document.getElementById('divId'); 
var img = document.createElement('img'); 
img.setAttribute('src', images.imageUrl); 
div.appendChild(img); 
img.onclick=function(){ 
    this.src=images.expandedImageUrl; 
}; 

DEMONSTRATION

---

如果具有類似於images對象對象的數組，就可以循環到創建它們。它比它似乎沒有價值的，由於「閉合效應」，這就是爲什麼我包括代碼：

var images = [ 
    { "imageUrl":"http://dystroy.org/re7210/img/crevettes-ail-courgettes-2-750.jpg",    
    "expandedImageUrl":"http://dystroy.org/re7210/img/crevettes-ail-courgettes-750.jpg"}, 
    { "imageUrl":"http://dystroy.org/re7210/img/cote-beuf-champis-02-850.jpg",    
    "expandedImageUrl":"http://dystroy.org/re7210/img/cote-beuf-champis-05-850.jpg"}, 
    { "imageUrl":"http://dystroy.org/re7210/img/onglet-truffes-850-02.jpg",    
    "expandedImageUrl":"http://dystroy.org/re7210/img/onglet-truffes-850-05.jpg"} 
]; 
var div = document.getElementById('divId'); 
for (var i=0; i<images.length; i++) { 
    var image =images[i]; 
    var img = document.createElement('img'); 
    img.setAttribute('src', image.imageUrl); 
    div.appendChild(img); 
    (function(expandedImageUrl){ // we embed the expanded URL in a closure to avoid having the value at end of loop used 
     img.onclick=function(){ 
      this.src=expandedImageUrl; 
     }; 
    })(image.expandedImageUrl); 
} 

DEMONSTRATION

---

編輯以下問題的評論：

這裏是一個允許點擊切換兩個圖像的版本：

var images = [ 
    { "imageUrl":"http://dystroy.org/re7210/img/crevettes-ail-courgettes-2-750.jpg",    
    "expandedImageUrl":"http://dystroy.org/re7210/img/crevettes-ail-courgettes-750.jpg"}, 
    { "imageUrl":"http://dystroy.org/re7210/img/cote-beuf-champis-02-850.jpg",    
    "expandedImageUrl":"http://dystroy.org/re7210/img/cote-beuf-champis-05-850.jpg"}, 
    { "imageUrl":"http://dystroy.org/re7210/img/onglet-truffes-850-02.jpg",    
    "expandedImageUrl":"http://dystroy.org/re7210/img/onglet-truffes-850-05.jpg"} 
]; 
var div = document.getElementById('divId'); 
for (var i=0; i<images.length; i++) { 
    var image =images[i]; 
    var img = document.createElement('img'); 
    img.setAttribute('src', image.imageUrl); 
    img.setAttribute('othersrc', image.expandedImageUrl); 
    img.setAttribute('width', '600px'); 
    div.appendChild(img); 
    img.onclick=function(){ 
     var src = this.getAttribute('src'); 
     this.src = this.getAttribute('othersrc'); 
     this.setAttribute('othersrc', src); 
    }; 
} 

DEMONSTRATION