Я получаю некоторые данные JSON с помощью следующей функции. Он вызывается при щелчке по элементу, и данные используются для создания таблицы, заполнения ячеек изображениями и добавления таблицы в div.

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 и FullWidth, которые я хотел бы получать при нажатии на img. Например, если я сделал идентификатор img чем-то вроде «68ArtImage», где 68 - это ImageID, я хотел бы иметь возможность передать 68 в функцию, прикрепленную к jsObjectData, и получить соответствующие данные изображения. Проблема заключается во-первых, что я не знаю, как сделать объект доступным. вне функции и, во-вторых, я не знаю, как прикрепить функцию к объекту.

0
etoisarobot 18 Авг 2010 в 01:56

2 ответа

Лучший ответ

Прочитав свой вопрос еще раз, возможно, это то, что вы хотите?

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 и возвращать объект изображения (например, ассоциативный массив), если он существует, иначе false.

Примере:

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');
}
4
Michael Robinson 17 Авг 2010 в 22:21

Вот какой-то псевдокод:

//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);
  }
});

Я бы не запускал это в производство. Я ненавижу глобальные переменные, поэтому у меня был бы объект, который управляет этой таблицей. Тогда объект может содержать ссылку на imageTable

0
Juan Mendes 17 Авг 2010 в 23:27