1

「連想配列」の配列、つまり、さまざまな HTML 要素のデータと次のような 1 つのパラメーターを保持するオブジェクトがあります。

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

各コンテナーには、カラー ピッカー キャンバス、カラー プレビュー キャンバス、16 進数の色の値を表示するテキスト ボックス、および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関数でも可能ですか、それとも自分で作成する必要がありますか?

4

2 に答える 2

6

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);
});
于 2012-07-13T19:59:21.093 に答える
0

ここでは 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);
});
于 2012-07-13T20:12:08.590 に答える