배열 요소에 이벤트 추가

배열 내부에서 루프를 만들고 요소에 이벤트를 추가하고 성공하지는 않습니다.배열 요소에 이벤트 추가

div_empresa_links_elements.push({ 
    div_mouseover: div_imagens_mouseover, 
    div_submenu: div_empresa_imagens, 
    div_txt: div_imagens_txt 
}, { 
    div_mouseover: div_institucional_mouseover, 
    div_submenu: div_empresa_institucional, 
    div_txt: div_institucional_txt 
}, { 
    div_mouseover: div_localizacao_mouseover, 
    div_submenu: div_empresa_localizacao, 
    div_txt: div_localizacao_txt 
}, { 
    div_mouseover: div_infraestrutura_mouseover, 
    div_submenu: div_empresa_infraestrutura, 
    div_txt: div_infraestrutura_txt 
}, { 
    div_mouseover: div_politicaDeQualidade_mouseover, 
    div_submenu: div_empresa_politicaDeQualidade, 
    div_txt: div_politicaDeQualidade_txt 
}, { 
    div_mouseover: div_linhaDoTempo_mouseover, 
    div_submenu: div_empresa_linhaDoTempo, 
    div_txt: div_linhaDoTempo_txt 
}, { 
    div_mouseover: div_historico_mouseover, 
    div_submenu: div_empresa_historico, 
    div_txt: div_historico_txt 
})

이 루프는 다음과 같습니다 : 이 배열입니다

for (var i = 0; i < div_empresa_links_elements.length; i++) { 
    var obj = div_empresa_links_elements[i] 
    obj.div_mouseover.onmouseover = function() { 
     obj.div_txt.style.opacity = 1 
     obj.div_txt.style.filter = 'alpha(opacity = 100)' 
     obj.div_submenu.style.opacity = .7 
     obj.div_submenu.style.filter = 'alpha(opacity = 70)' 
    } 
}

것은 그냥 작동, 내가 루프없이 손으로 요소 (_mouseover), 각 이벤트를 넣어 경우. 아무도 그 이유를 말할 수 있습니까?

출처

2011-11-11 Marcelo Noronha

그들은 모두 같은 일을 가정하는 경우 때 마우스 그들에 왜 함수 위에 하나의 마우스를 쓰지 않고 모두 동일한 함수를 참조하게합니까? for 루프 안에 함수를 두는 것은 의미가 없습니다. 같은 일을하기 위해 12 개의 함수를 만들 필요가 없습니다. 현재 코드가 수행중인 작업은 무엇입니까? – Ryan

예, 감사합니다 :) –

문제는 클로저 문제로 인해 발생합니다. 현재 각 반복에서 obj을 덮어 씁니다. 따라서 obj은 마지막으로 정의 된 요소를 가리 킵니다. 이 문제를 해결하려면, 자기 호출 함수에서 루프의 몸을 감싸, 아래와 같이, 인자로 변수 obj을 전달합니다

for (var i = 0; i<div_empresa_links_elements.length;i++){ 
    var obj = div_empresa_links_elements[i] 
    (function(obj){ //obj is declared again. Inside this func, obj = <see below> 
     obj.div_mouseover.onmouseover = function(){ 
      obj.div_txt.style.opacity = 1 
      obj.div_txt.style.filter = 'alpha(opacity = 100)' 
      obj.div_submenu.style.opacity = .7 
      obj.div_submenu.style.filter = 'alpha(opacity = 70)' 
     } 
    })(obj); //Pass the variable obj as defined at the top 
}

출처

2011-11-11 18:15:09

고맙습니다. :) –

배열 요소에 이벤트 추가

답변

관련 문제