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

Stack Overflow用户

提问于 2013-03-13 02:46:26

回答 1查看 2.4K关注 0票数 0

我有一个JavaScript数组，它包含许多图像。这些图像都是从我的HTML中的一个隐藏部分中提取的，使用的行如下

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

我之所以从HTML而不是直接从源代码中获取图像，是因为我想在HTML5画布上显示它们中的大约30个，如果我要直接将它们从源代码加载到JavaScript代码中，页面需要很长时间才能加载，所以我已经将它们“预加载”到HTML的一个隐藏部分中，然后从那里加载到JavaScript代码中。

因此，我使用以下内容创建了我的JavaScript数组：

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

(向sources数组添加图像大约有30行)。

其想法是有四、五种不同类型的图像(即，一些是资产，另一些是负债，等等)，用户将被要求将每个图像拖到相应的描述框中(也显示在画布上)。

所以我想做的是，把图像放在一个数组中的不同的“组”中。我已经看过它，我的理解是，最好的方法是使用关联数组，例如：

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

但我不知道如何在我目前的情况下使用这个.我会做以下事情吗？

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

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

然后，当用户将图像拖到他们认为属于的描述框时，我将如何检查图像是否属于它被拖到的描述框？

我打算检查图像是否被拖到正确的描述框中的方式是，当在其中一个‘可拖动’图像上检测到一个mousedown事件时，将一个布尔值设置为"true“，并跟踪光标在画布上移动时的x&y坐标。

然后，当触发mouseup事件时，我将检查光标在这一点上的坐标。如果光标将图像放置到绘制其中一个描述框的位置(例如，x在50-100之间，y在150-200之间，负债描述框位于x 150-200，y 150-200)，那么我将检查哪个描述框位于该位置(循环遍历描述框位置的数组，并检查光标所在位置的哪个描述框)。

一旦我在那个位置有了描述框的名称，我就会检查刚刚被删除的图像是什么类型，如果它与放在放置位置的框相匹配，它将从画布上消失，如果不是，它将被拉回原来被用户“拾取”的地方。

我不确定如何做到这一点，如何访问用户从数组中单击的“类型”图像？

编辑2013-03-13T14:15

所以我已经给出了建议的答案。但是，当我现在在浏览器中查看我的页面时，画布将不显示，并且在控制台中会出现一个“未显示的异常”错误。此错误消息显示：

未明的例外：[例外.“组件返回的失败代码: 0x80040111 (NS_ERROR_NOT_AVAILABLE) nsIDOMCanvasRenderingContext2D.drawImage”ns结果："0x80040111 (NS_ERROR_NOT_AVAILABLE)“位置："JS帧:：JS:第4250行”数据: no]

我想知道这是不是因为我在这个函数结束时调用的函数.？为了进一步解释，我正在window.onload函数中创建和使用window.onload数组。目前的情况如下：

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

因为我在window.onload函数末尾调用的其他函数之一，画布现在没有显示吗？但是在我更改sources数组之前，这些函数调用是正确执行的，所以我在sources数组中更改的内容可能有问题吗？

arrays

associative-array

javascript

腾讯云会员中心

加入腾讯云会员，每月可领会员专属优惠券；会员云产品免费体验；云产品会员专享价；会员签到抽奖…

回答 1

Stack Overflow用户

发布于 2013-03-13 02:56:30

我建议重组你的消息来源，反对：

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;
...