for 루프가 Jquery 선택기에서 작동하지 않습니다.

for 루프에서 고생하고 있습니다. 작동하지 않는 것 같습니다. for 루프를 (".circle"+ (i + 1)) Selector에 추가하려고 시도했지만 그렇지 않습니다. 한 원 (i)에 숨어서 퇴색합니다. 가능한가 또는 비슷한 접근인가?for 루프가 Jquery 선택기에서 작동하지 않습니다.

도움을 주시면 감사하겠습니다.

<!DOCTYPE html> 
<html> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
</head> 
<body> 
<ul class="menu"> 
    <li class="first"><a href="#btn1">btn1</a></li> 
    <li class="second"><a href="#btn2">btn2</a></li> 
    <li class="third"><a href="#btn3">btn3</a></li> 
    <li class="forth"><a href="#btn4">btn4</a></li> 
</ul> 

<div class="circle1 circle">1</div> 
<div class="circle1 circle">2</div> 
<div class="circle1 circle">3</div> 
<div class="circle4 circle">4</div> 

<script> 
for(i=0;i<$(".menu li").length;i++){ 
    $(".menu li").eq(i).on('click',function(){ 
     $(".circle").hide(); 
     $('.circle'+(i+1)).stop().fadeIn('300'); 
     return false; 
    }); 
    } 
</script> 
</body> 
</html>

출처

2014-02-19 Niraj paul

짧은 답변 : 폐쇄. 'i'는 항상 클릭 처리기의 루프 끝 부분의 값과 같습니다. –

변수의 범위는 문제가 있습니다. i은 항상 클릭 처리기의 루프 끝에있는 값을 갖습니다. 이 같은 문제를 해결할 수 있습니다

for(i=0;i<$(".menu li").length;i++){ 
    (function(j) { 
     $(".menu li").eq(j).on('click',function(){ 
      $(".circle").hide(); 
      $('.circle'+(j+1)).stop().fadeIn('300'); 
      return false; 
     }); 
    })(i); 
}

은 무엇 위의 일은 새로운 범위를 복사 루프 동안 i의 값을 생성하는 즉시 호출 기능 식 (인생)를 사용하여 폐쇄를 만드는 것입니다.

루프 전에 변수에 $(".menu li").length을 할당하여 jQuery가 루프 할 때마다 컬렉션을 다시 만들지 않도록 할 수 있습니다.

무슨 일이 일어나고 있는지 이해하려면,이 비교 : 이것에

for(i=0;i<5;i++){ 
    setTimeout(function() { 
     console.log(i); 
    },100); 
} 

// outputs: 5 5 5 5 5

을 :

for(i=0;i<5;i++){ 
    (function(i) { 
     setTimeout(function() { 
      console.log(i); 
     },100); 
    })(i); 
} 

// outputs: 0 1 2 3 4

http://jsfiddle.net/PLsUN/

출처

2014-02-19 16:59:01

매트 Burland의 대답은 정확하고 매우 철저하다. 이것은 단지 (당신이 선호하는 경우) for 루프를 사용하지 않도록하는 다른 제안입니다 :

// Use the jQuery's already-available `.each` method 
$(".menu li").each(function(index, list_element){ 

    (function(list_index){ // as per Matt's answer 
     list_element.on('click',function(){ 
      $(".circle").hide(); 
      $('.circle'+(list_index+1)).stop().fadeIn('300'); 
      return false; 
     } 
    })(index); 

});

효과는 동일하며, (지금까지 내가 아는 한) 성능에 차이가 없다; 나는 그것이 약간 더 청결한 것을 느낀다.

출처

2014-02-19 20:21:39

for 루프가 Jquery 선택기에서 작동하지 않습니다.

답변

관련 문제