jquery와 javascript의 클로우즈

Question

나는 아래와 같은 코드를 가지고 있고 익명의 함수와 함께 javascript의 클로저가 나에게 두통을주고있다.

for (var i = 0, len = sites.length ; i < len ; i++) 
{ 
    $("#thumb"+i).click(function() { $("#shader").show(); $("#thumbInfo"+i).show(); alert("#thumbInfo"+i); }); 
    $("#thumbInfo"+i+" .xbutton").click(function() { $("#shader").hide(); $("#thumbInfo"+i).hide(); }); 
} 

폐쇄 때문에 i는 항상 5이며 (사이트 배열에는 5 개의 요소가 있음) 모든 클릭 핸들러는 동일한 ID를 참조합니다.

해결 방법은 없나요?

Answer 1

항상 jQuery의 each()으로 반복 할 수 있습니다.

$.each(sites, function(i) { 
    $("#thumb"+i).click(function() { $("#shader").show(); $("#thumbInfo"+i).show(); alert("#thumbInfo"+i); }); 
    $("#thumbInfo"+i+" .xbutton").click(function() { $("#shader").hide(); $("#thumbInfo"+i).hide(); }); 
}); 

Answer 2

var len = sites.length ; 
for (var i = 0; i < len ; i++) 
    { 
     $("#thumb"+i).click(function() { $("#shader").show(); $("#thumbInfo"+i).show(); alert("#thumbInfo"+i); }); 
     $("#thumbInfo"+i+" .xbutton").click(function() { $("#shader").hide(); $("#thumbInfo"+i).hide(); }); 
    } 

내가 5를 할당되었을 수 있습니다

;

Answer 3

사용하여 반복에 대한의 폐쇄 :

for (var i = 0, len = sites.length ; i < len ; i++) 
{ 
    (function(i) { 
     $("#thumb"+i).click(function() { 
      $("#shader").show(); 
      $("#thumbInfo"+i).show(); 
      alert("#thumbInfo"+i); 
     }); 
     $("#thumbInfo"+i+" .xbutton").click(function() { 
      $("#shader").hide(); 
      $("#thumbInfo"+i).hide(); 
     }); 
    }(i)); 
} 

Answer 4

장소 루프 외부 i하여 기능 및 매개 변수를 반환하는 함수. 어쨌든 JSLint는이 작업을 권장하며, 일부에서는 부팅하기가 더 쉽습니다.

function make_fn1(i) { 
    return function() { $("#shader").show(); $("#thumbInfo"+i).show(); }; 
} 
function make_fn2(i) { 
    return function() { $("#shader").hide(); $("#thumbInfo"+i).hide(); }; 
} 
for (var i = 0; i < sites.length ; i++) 
{ 
    $("#thumb"+i).click(make_fn1(i)); 
    $("#thumbInfo"+i+" .xbutton").click(make_fn2(i)); 
} 

그러나이 방법은 다른 방법으로 정리할 수 있습니다. 처음에는 jQuery를 사용하는 한 $("#shader, #thumbInfo"+i).show();이 더 간결합니다. 당신은 루프를 풀다 경우 또한, 현재 코드에 두 가지 기능을 숨기거나 밖으로 고려하지 않는 같은 두 가지 요소를 보여, 그렇게 될 수 중 하나는 개념이

function make_fn (i,showhide) { 
    return function() { $("#shader, #thumbInfo"+i)[showhide]() }; 
} 
for (var i = 0; i < sites.length ; i++) 
{ 
    $("#thumb"+i).click(make_fn(i,'show')); 
    $("#thumbInfo"+i+" .xbutton").click(make_fn(i,'hide')); 
}