如何使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对象可用于外部功能？

回答

相关问题