在Javascript中获取关联数组数组的索引

我有一个“关联数组”数组，即对象，其中包含各种HTML元素的数据和一个其他参数，如下所示：

container[0] = { picker_canvas: document.getElementById("background_picker"),
                 color_canvas: document.getElementById("background_color"),
                 hex_text: document.getElementById("background_text"),
                 mouse_down: false };

container[1] = { picker_canvas: document.getElementById("textbox_picker"),
                 color_canvas: document.getElementById("textbox_color"),
                 hex_text: document.getElementById("textbox_text"),
                 mouse_down: false };

container[2] = { picker_canvas: document.getElementById("font_picker"),
                 color_canvas: document.getElementById("font_color"),
                 hex_text: document.getElementById("font_text"),
                 mouse_down: false };

每个容器都有一个对颜色选择器画布、颜色预览画布、一个显示十六进制颜色值的文本框以及一个

鼠标下压

布尔值的引用。稍后，我通过如下方式迭代容器来初始化一些事件侦听器：

for (i=0; i<3; i++) {

    container[i].picker_canvas.addEventListener("mousedown", function() {
        container[i].mouse_down = true;
    }, false);

    container[i].picker_canvas.addEventListener("mouseup", function() {
        container[i].mouse_down = false;
    }, false);

    container[i].picker_canvas.addEventListener("mousemove", function(evt) {
        getColor(container[i], evt);
    }, false);

    container[i].hex_text.addEventListener("change", function(evt) {
        drawColorSquare(container[i], evt.target.value)
    }, false);

}

---

基本上，我需要在关联数组的数组中搜索

evt.target

，并让它返回数组的索引。因此，对于任何内置Javascript函数，这都是可能的，还是我只需要自己制作？

既然您似乎不必担心Internet Explorer 8和更早版本，请使用

forEach

：

container.forEach(function(x) {
    x.picker_canvas.addEventListener("mousedown", function() {
        x.mouse_down = true;
    }, false);

    x.picker_canvas.addEventListener("mouseup", function() {
        x.mouse_down = false;
    }, false);

    x.picker_canvas.addEventListener("mousemove", function(evt) {
        getColor(x, evt);
    }, false);

    x.hex_text.addEventListener("change", function(evt) {
        drawColorSquare(x, evt.target.value)
    }, false);
});

---

由于您似乎不必担心Internet Explorer 8及更早版本，请使用

forEach

：

container.forEach(function(x) {
    x.picker_canvas.addEventListener("mousedown", function() {
        x.mouse_down = true;
    }, false);

    x.picker_canvas.addEventListener("mouseup", function() {
        x.mouse_down = false;
    }, false);

    x.picker_canvas.addEventListener("mousemove", function(evt) {
        getColor(x, evt);
    }, false);

    x.hex_text.addEventListener("change", function(evt) {
        drawColorSquare(x, evt.target.value)
    }, false);
});

---

由于我们不必在这里支持IE8，我们可以全力以赴：

container.forEach(function(x) {
    x.handleEvent = function(e) { //This is stupid, wish I had the time to refactor the code to use prototypes
        switch (e.type) {
        case "mousedown":
            this.mouse_down = true;
            break;
        case "mouseup":
            this.mouse_down = false;
            break;
        case "mousemove":
            getColor(this, e);
            break;
        case "change":
            drawColorSquare(this, e.currentTarget.value);
            break;
        }
    };
    var canvas = x.picker_canvas;
    canvas.addEventListener("mousedown", x, false);
    canvas.addEventListener("mouseup", x, false);
    canvas.addEventListener("mousemove", x, false);
    x.hex_text.addEventListener("change", x, false);
});

---

由于我们不必在这里支持IE8，我们可以全力以赴：

container.forEach(function(x) {
    x.handleEvent = function(e) { //This is stupid, wish I had the time to refactor the code to use prototypes
        switch (e.type) {
        case "mousedown":
            this.mouse_down = true;
            break;
        case "mouseup":
            this.mouse_down = false;
            break;
        case "mousemove":
            getColor(this, e);
            break;
        case "change":
            drawColorSquare(this, e.currentTarget.value);
            break;
        }
    };
    var canvas = x.picker_canvas;
    canvas.addEventListener("mousedown", x, false);
    canvas.addEventListener("mouseup", x, false);
    canvas.addEventListener("mousemove", x, false);
    x.hex_text.addEventListener("change", x, false);
});

---

---

正如您所知，Javscript不支持关联数组，它将它们作为对象处理，因此您的术语是不正确的；这些不是“关联数组”，实际上是一个对象数组。“picker_canvas”和这些对象的属性。此外，可能有比我回答的更好的解决方案-我们可以看看你的HTML结构吗？正如你所知，Javscript不支持关联数组，它将它们作为对象处理，因此你的术语不正确。Alex是对的；这些不是“关联数组”，实际上是一个对象数组。“picker_canvas”和这些对象的属性。此外，可能有比我回答的更好的解决方案-我们可以看看您的HTML结构吗？请使用

。addEventListener

：P您的评论听起来很错误“以防您不必担心ie8”当到处都是

.addEventListener

时：D@Esailija当前位置我还不推荐。在IE方面，它要到第9版才可用。我想我们忘了他的剧本也在处理画布。。。去吧，我会说是forEach！与

.addEventListener

：P当

到处都是.addEventListener

时，你的评论听起来就错了，“以防你不必担心ie8”：D@Esailija当前位置我还不推荐。在IE方面，它要到第9版才可用。我想我们忘了他的剧本也在处理画布。。。去吧，我会说是forEach！你是不是想在那里通过

x.handleEvent

？还有，为什么会出现两个循环…？@minitech查看评论。是神奇的，我真的想把这个东西传过去。否则，

这个

就不会像我现在使用它那样工作了。@minitech ok，你赢了，但它很难看。基本上，这个函数可以完全从第二个循环中分离出来（也就是说，它可以在某个地方静态定义，比如原型），我试着证明：我想是的。原型将是最整洁的，所以如果你没有时间，我会非常高兴；）@minitech我确实有时间，但我觉得这需要很多工作。这个答案并没有像我希望的那样获得选票：你的意思是通过那里的

x.handleEvent

？还有，为什么会出现两个循环…？@minitech查看评论。是神奇的，我真的想把这个东西传过去。否则，

这个

就不会像我现在使用它那样工作了。@minitech ok，你赢了，但它很难看。基本上，这个函数可以完全从第二个循环中分离出来（也就是说，它可以在某个地方静态定义，比如原型），我试着证明：我想是的。原型将是最整洁的，所以如果你没有时间，我会非常高兴；）@minitech我确实有时间，但我觉得这需要很多工作。这个答案并没有像我希望的那样获得选票：D