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

Getting the Index of an Array of Associative Arrays in Javascript

本文关键字：数组 索引 关联 获取 Javascript      更新时间：2023-09-26

我有一个"关联数组"的数组，即对象，它保存了各种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 };

每个容器都有一个对颜色选择器画布、颜色预览画布、显示十六进制颜色值的文本框和mouse_down布尔值的引用。稍后，我通过如下容器进行迭代来初始化一些事件侦听器：

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

但这不起作用，因为i变得未定义，所以我现在正试图通过这样做来获得正确的索引，但我不确定如何在Javascript 中实际实现它

container[i].picker_canvas.addEventListener("mousedown", function(evt) {
    container[container.indexof(evt.target)].mouse_down = false;
}, 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);
});

由于我们不必在这里支持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);
});
相关文章：