如何为JavaScript数组的每个元素赋予不同的“类型”？

Question

I have a JavaScript array which contains a number of images. The images have all been taken from a hidden section in my HTML using lines such as

sources[0] = document.getElementById("building").src

The reason I am getting the images from the HTML rather than directly from the source is because I want to display around 30 of them on an HTML5 canvas, and if I were to load them directly from source into the JavaScript code, the page would take ages to load, so I've 'preloaded' them in a hidden section of my HTML, and then loaded them into the JavaScript code from there.

So, I have created my JavaScript array with the following:

var sources = [];
sources[0] = document.getElementById("building").src,
sources[1] = document.getElementById("chair").src,
....

(There are roughly 30 lines for adding images to the sources array).

The idea is that there will be four or five different 'types' of image (that is, some will be assets, others will be liabilities, etc.), and the user will be required to drag each image to its corresponding description box (also displayed on the canvas).

So what I'd like to do, is put the images into different 'groups' within the one array. I've had a look into it, and my understanding is that the best way to do this is by using associative arrays, so, for example:

var sources = {
    name1 : ["name1", "place1", "data1"],
    name2 : ["name2", "place2", "data2"],
    name3 : ["name3", "place3", "data3"]
};

But I'm not sure how to use this in the context of what I currently have... Would I do something like the following?

var sources = {
    asset1 : document.getElementById("building").src,
    asset2 : document.getElementById("chair").src,

    liability1: document.getElementById("electricity").src,
    ...
};

How would I then check whether an image belongs to the description box it's been dragged to when the user drags it to the description box they think it belongs to?

The way I intend to check whether an image has been dragged to the correct description box, is to have a Boolean that will be set to "true" when a mousedown event is detected on one of the 'draggable' images, and keep track of the x & y coordinates of the cursor as it moves around the canvas.

Then, when the mouseup event is triggered, I will check what the coordinates of the cursor are at that point. If the cursor has dropped the image to a location at which one of the description boxes are drawn (so for example, x being between 50-100 and y between 150-200 is where the assets description box is, liabilities description box at x 150-200, y 150-200), then I will check which description box is at that location (loop through the array of description box locations, and check which one is at the location of the cursor, if any).

Once I have the name of the description box at that location, I will check to see what 'type' the image that has just been dropped was, and if it matches the box at the location at which it's been dropped, it will disappear from the canvas, if not, it will be drawn back where it was originally 'picked up' by the user.

What I'm not sure about with how to do this, is how do I access the 'type' of image that the user has clicked on from the array?

---

Edit 2013-03-13T14:15

So I've given the suggested answer a go. However, when I now view my page in the browser, the canvas is not displayed, and I get an "uncaught exception" error in the console. This error message says:

uncaught exception: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: file:///M:/year%205/major%20project/development/collision/kinetic.js :: :: line 4250" data: no]

I'm wondering if this is because of the functions I'm calling at the end of this function...? To explain things a bit further, I'm creating and using the sources array inside the window.onload function. It currently looks like this:

window.onload = function(){
    var sources = {
        assets: [],
        liabilities: [],
        income: [],
        expenditure: []
    }
    console.log("the code reaches here");
    sources.assets[0] = document.getElementById("building").src,
    sources.assets[1] = document.getElementById("chair").src,
    sources.assets[2] = document.getElementById("drink").src,
    sources.assets[3] = document.getElementById("food").src,
    sources.assets[4] = document.getElementById("fridge").src,
    sources.assets[5] = document.getElementById("land").src,
    sources.assets[6] = document.getElementById("money").src,
    sources.assets[7] = document.getElementById("oven").src,
    sources.assets[8] = document.getElementById("table").src,
    sources.assets[9] = document.getElementById("van").src,

    sources.liabilities[10] = document.getElementById("burger").src,
    sources.liabilities[11] = document.getElementById("chips").src,

    /* I have loads of lines like this, adding in roughly 30 images */

    /*Maybe create an array of attributes within each position
      of this array, so that I have access to all of each
      element's attributes. */

    /*Create an associative array for the images and their types*/
    var imageTypes = new Array();

    /*Use a loop to populate the associative array, declare variables for the total number
      of items in each group, declare a variable for the item being for example: */

    var numAssets = 10;
    var numLiabilities = 5;
    var numEx = 11;
    var numInc = 8;

    // Error checking- check total of these numbers adds up to the number elements in sources array.

    var j = 0; // This is to indicate the location of the image in sources array

    loadImages(sources, drawImage);
    drawGameElements();
    drawDescriptionBoxes();
    //drawBox();

    stage.add(imagesLayer);
};

Is the canvas now not showing because of one of the other functions I'm calling at the end of the window.onload function? But these function calls were performing correctly before I changed my sources array, so maybe it something wrong with what I've changed in the sources array?

Answer 1

I'd suggest restructuring your sources object to:

var sources = {
  assets: [],
  liabilities: []
};

sources.assets[0] = document.getElementById("building").src;
sources.assets[1] = document.getElementById("chair").src;
...
sources.liabilities[0] = document.getElementById("electricity").src;
...

The sources object is optional, you can just have the assets and liabilities arrays.

You can then use this answer: How to determine if object is in array to figure out the 'type' of the selected image.

---

Alternatively, you could add a class to the images depending on their 'type' and then check that when the user selects.