如何使Javascript對象可用於外部功能？

我使用以下函數檢索一些JSON數據。當單擊元素並使用數據創建表時調用它，使用圖像填充單元格並將表格附加到div。如何使Javascript對象可用於外部功能？

function LoadImagesByCategory() { 
    $.getJSON("/Service/GetJson.ashx?data=images", function(data) { 
     jsObjectData = data.ImageCollection.Images; 
     //Create a table named imageTable 
     $("#imagesByCategory").append(imageTable); 
     } 
    })

jsObjectData看起來像這樣。

{"ImageCollection": 
    {"Images": 
    [{ "ImageID":"68", 
     "CatID":"1", 
     "Name":"uploadedFile", 
     "Location":"/Images/Art/Full/68.gif", 
     "ClipLocation":"/Images/Art/Clips/68.gif", 
     "FullHeight":"504", 
     "FullWidth":"451" 
     }, 
     { "ImageID":"69", 
     "CatID":"1", 
     "Name":"uploadedFile", 
     "Location":"/Images/Art/Full/69.gif", 
     "ClipLocation":"/Images/Art/Clips/69.gif", 
     "FullHeight":"364", 
     "FullWidth":"500" 
     }, 
     etc. etc 
    ] 
    } 
}

它包含了像FullHeight和全角的圖像，我希望能夠點擊一個img當檢索其他信息。例如，如果我做了像「68ArtImage」這樣的img的id，其中68是ImageID，我希望能夠將68傳遞給附加到jsObjectData的函數並檢索相應的圖像數據。問題首先是我不知道如何使對象有效。函數之外，其次我不知道如何將函數附加到對象。

來源

2010-08-17 etoisarobot

什麼是'imageTable'這裏？您尚未指定該變量扮演的角色。 – 2010-08-17 22:01:45

當你點擊圖片時，接下來會發生什麼（模態彈出信息，重定向到另一個頁面...）？ – Tommy 2010-08-17 22:02:08

@M Robinson - 之前他問過一個問題，關於如何將它放入一個4列表（數據看起來很熟悉），這就是imageTable變量的含義，以及爲什麼我問我在我的評論中做了什麼。 – Tommy 2010-08-17 22:03:07

再次閱讀您的問題後，也許這是你想要的？

function getImageData(id, json){ 
    for(i in json.ImageCollection.Images){ 
     if(json.ImageCollection.Images[i].ImageID == 69){ 
      return json.ImageCollection.Images[i]; 
     } 
    } 
    return false; 
}

getImageData將搜索給定的JSON對象並返回圖像對象（如關聯數組），如果它存在，否則爲假。

例子：

var json = {"ImageCollection": 
    {"Images": 
    [{ "ImageID":"68", 
     "CatID":"1", 
     "Name":"uploadedFile", 
     "Location":"/Images/Art/Full/68.gif", 
     "ClipLocation":"/Images/Art/Clips/68.gif", 
     "FullHeight":"504", 
     "FullWidth":"451" 
     }, 
     { "ImageID":"69", 
     "CatID":"1", 
     "Name":"uploadedFile", 
     "Location":"/Images/Art/Full/69.gif", 
     "ClipLocation":"/Images/Art/Clips/69.gif", 
     "FullHeight":"364", 
     "FullWidth":"500" 
     } 
    ] 
    } 
} 

function getImageData(id, json){ 
    for(i in json.ImageCollection.Images){ 
     if(json.ImageCollection.Images[i].ImageID == 69){ 
      return json.ImageCollection.Images[i]; 
     } 
    } 
    return false; 
} 

if(image = getImageData(69, json)){ 
    alert('found the image wooo!'); 
    // now do something with your image object 
} 
else{ 
    alert('no image with that id found'); 
}

來源

2010-08-17 21:58:49

下面是一些僞代碼：

//global 
var gImageTable = {}; 


function LoadImagesByCategory() { 
    $.getJSON("/Service/GetJson.ashx?data=images", function(data) { 
    jsObjectData = data.ImageCollection.Images; 
    // Add the images to the image table 
    for (var i=0; i < jsObjectData.length; i++) { 
     var img = jsObjectData[i]; 
     gImageTable[img.ImageId] = img; 
    } 

    // Create a table named imageTable. Should add the id into each of the images 
    // so we can access its data from the click handler 
    $("#imagesByCategory").append(imageTable); 
    }) 
} 

// The click handler that knows about image map structure 
$("#imagesByCategory").click(function (e) { 
    // or something smarter to detect that it 
    // was a click within one of the images 
    if (e.target.tagName == "IMG") { 
    var imageData = gImageTable[e.target.id];  
    console.log(imageData.CatID, imageData.FullHeight); 
    } 
});

這不是我怎麼會投入生產。我討厭全局變量，所以我會有一個管理該表的對象。然後該對象可以保存對圖像的引用表

來源

2010-08-17 23:19:35

如何使Javascript對象可用於外部功能？

回答

相關問題