자바에서 연관 배열의 인덱스 색인 얻기

Question

그래서 "연관 배열"배열을 가지고 있습니다. 다양한 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 }; 

각 용기는 색 선택 캔버스 컬러 미리 캔버스 16 진수 색상 값을 표시하는 텍스트 박스에 대한 레퍼런스를 갖고, mouse_down boolean 나중에 나는이 같은 컨테이너를 반복하여 몇 가지 이벤트 리스너를 초기화 :

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에 대한 연관 배열의 배열을 검색해야하고 배열의 인덱스를 반환 한 사실

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

자바 스크립트

에서이를 구현하는 방법을 잘 모르겠습니다. 그래서 이것은 자바 스크립트 함수로 만들어진 모든 함수로 가능합니까? 아니면 그냥 내 자신을 만들어야합니까? 당신이 이전에 Internet Explorer 8을 걱정하지 않는 것 때문에

Answer 1

, forEach 사용 : 우리가 여기 IE8을 지원하지 않기 때문에

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

Answer 2

, 우리는 모두 밖으로 갈 수 있습니다

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