for 루프에서 생성 된 요소를 선택하는 방법은 무엇입니까?

Question

동적으로 많은 요소 쌍을 내 페이지에로드했습니다. 각 쌍에는 목록에 설명자가 있고 이미지 위에 형광펜이 중첩되어 있습니다.

사용자가 목록 항목을 가리키면 다른 요소가 강조 표시됩니다.

현재 코드는 내가 가리키는 목록 항목에 관계없이 .viewer의 마지막 요소 만 강조 표시합니다.

이 문제를 해결하는 가장 좋은 방법은 무엇입니까?

for (i = 0; i < Ajax.length; ++i) { 
    var listid = 'listitem-'+i; 
    var mapid = 'mapitem-'+i; 

    $('.list').append('<div id="'+listid+'">Lots of Text</div>'); 
    $('.viewer').append('<div id="'+mapid+'">Here It Is</div>'); 

    $('#'+listid).hover(function(){ 
     $('#'+mapid).toggleClass('highlight'); 
    }); 
} 

Answer 1

mapid은 호버 이벤트 핸들러가 실행되는 시간에 의해 할당 된 마지막 값을 가지고, 그래서 당신은 당신이 관련 값이 있는지 확인해야합니다.

...

for (i = 0; i < Ajax.length; ++i) { 
    var listid = 'listitem-'+i; 
    var mapid = 'mapitem-'+i; 

    $('.list').append('<div id="'+listid+'">Lots of Text</div>'); 
    $('.viewer').append('<div id="'+mapid+'">Here It Is</div>'); 

    (function(listid, mapid) { 
     $('#'+listid).hover(function(){ 
      $('#'+mapid).toggleClass('highlight'); 
     }); 
    })(listid, mapid); 
} 

다른 방법은 다음과 같이 목록 항목과 연관된 맵 ID를 저장하는 것입니다 ... 인클로저 내부의 호버 할당을 넣어보십시오

for (i = 0; i < Ajax.length; ++i) { 
    var listid = 'listitem-'+i; 
    var mapid = 'mapitem-'+i; 

    $('.list').append('<div id="'+listid+'">Lots of Text</div>'); 
    $('.viewer').append('<div id="'+mapid+'">Here It Is</div>'); 

    $('#'+listid).data("associated-map-id", mapid); 

    $('#'+listid).hover(function(){ 
     $('#'+$(this).data("associated-map-id")).toggleClass('highlight'); 
    }); 
} 

어느 것이 든 작동하고 그들은 동일한 결과를 줄 것이다. 원하는 것을 선택하십시오.

Answer 2

호버 핸들러를 클로저로 이동하여 listid 및 mapid을 인수로 전달하십시오. 이렇게하면 더 높은 범위에서 덮어 쓰기되는 mapid 및 listid의 영향을받지 않는 새 범위에서 변수가 만들어집니다.

for (i = 0; i < Ajax.length; ++i) { 
    var listid = 'listitem-'+i; 
    var mapid = 'mapitem-'+i; 

    $('.list').append('<div id="'+listid+'">Lots of Text</div>'); 
    $('.viewer').append('<div id="'+mapid+'">Here It Is</div>'); 

    (function(listid, mapid){ 
     $('#'+listid).hover(function(){ 
      $('#'+mapid).toggleClass('highlight'); 
     }); 
    })(listid, mapid); 
}