충전 배열이

Question

나는 이러한 상황이 있습니다

이

<div id="rate1_wrapper"> 
    <a href="#" id="0_1">...</a> 
    <a href="#" id="0_2">...</a> 
    <a href="#" id="0_3">...</a> 
</div> 

<div id="rate2_wrapper"> 
    <a href="#" id="1_1">...</a> 
    <a href="#" id="1_2">...</a> 
    <a href="#" id="1_3">...</a> 
</div> 

... 

var ratings = new Array(); 
for (i=0; i < 8; i++) 
{ 
    ratings[i] = -1; // Default is unrated 

} 

for (i=0; i < 8; i++) 
{ 
    $('#rate' + i + '_wrapper a').click(function() { 
     ratings[i] = parseInt($(this).attr('id').split('_')[1]); 
     console.debug(ratings); 
    }); 
} 

내 일을 채우는 것입니다 : 'N'입니다 'rateN_wrapper'와 같은 ID를 가진 8 DIV 블록을이 사업부의 수입니다 클릭 된 링크의 ID (파싱 된)로 필요한 위치에 배열. 하지만 항상 array (8)의 최신 요소 만 변경합니다. 왜?

Answer 1

for 루프의 종료로 인해 발생하는 문제입니다. 당신은 부모 ID를 분석하여 ID를 조회 수 :

for (i=0; i < 8; i++) 
{ 
    $('#rate' + i + '_wrapper a').click(function() { 
    var parentId = $(this).parent('div').attr('id'); 
    var index = /\d/.exec(parentId); 
    ratings[index] = parseInt($(this).attr('id').split('_')[1]); 
    }); 
} 

Answer 2

작성하는 함수가 i 변수를 닫고 있기 때문입니다. 함수를 만들 때 값 대신 현재 값으로 i에 대한 참조를 봅니다. for 루프가 끝나면 8이되므로 모든 익명 함수는 ratings[8]을 업데이트합니다. 이 문제를 해결할 수있을 것 같아요 :

루프 본문 내부의 var을 선언하면 모든 반복마다 리 바인드되는지 확실하지 않습니다. 그렇다면 익명 함수는 함수가 작성된 시간에 idx의 값만 볼 수 있습니다. 여기에 내가 일할 수있는 방법이 있습니다 :

function CreateHandler(idx) { 
    return function() { 
     ratings[idx] = parseInt($(this).attr('id').split('_')[1]); 
     console.debug(ratings); 
    } 
} 

for (i=0; i < 8; i++) { 
    $('#rate' + idx + '_wrapper a').click(CreateHandler(i)); 
} 

따라서 정확한 인덱스로 익명의 함수를 생성하는 함수를 만듭니다. 반환 된 익명 함수는 생성시에 idx의 값을 보게됩니다.