JQuery와 변수 문제

Question

for(var n=0;n<10;n++) 
    { 
      $('#content-scroll'+n).mousewheel(function(event, delta) { 
     if (delta > 0) sliderUp(n-1); 
     else if (delta < 0) sliderDown(n-1); 
     return false; // prevent default 
    }); 

    n++; 
} 

전달이 코드에 문제가 변수 "n"은 바로 숫자 만 9 (마지막 번호) 및 모든 10 개 요소에 마우스 휠을 추가 할 mouswheel 함수에 전달되지 않습니다. 누구든지이 함수에 변수를 전달하여 설명하는 방법을 설명 할 수 있습니까?

Answer 1

나는 자바 스크립트에서 클로저의 문제라고 생각하는데, n은 실제로 외부 n 변수에 대한 참조입니다. 나는 다음이 대신 일을한다고 생각 :

은

for(var n=0;n<10;n++) 
{ 
    var localN = n; 
    $('#content-scroll'+n).mousewheel(function(event, delta) { 
    if (delta > 0) sliderUp(localN-1); 
    else if (delta < 0) sliderDown(localN-1); 
    return false; // prevent default 
    }); 

    //is this really needed?? 
    //n++; 
} 

Answer 2

은 당신의 n 값은 0-9 또는 1-10에서 가기로되어 있습니까?

0-9이면 n-1 표현식을 모두 n으로 변경하십시오.

1 ~ 10이면 루프를 var n=1,n<=10;n++으로 변경하고 모두 n-1을 n으로 변경하십시오.

또한 for 루프가 이미 n의 값을 증가시키기 때문에 하단의 n++을 제거하십시오.

Answer 3

완벽하게 jQuery 솔루션을 사용하고 있습니다.

$("[id^='content-scroll']").mousewheel(function(event,delta) { 
    var n = this.id.replace(/content-scroll/,''); 
    if (delta > 0) 
     sliderUp(n); 
    else if (delta < 0) 
     sliderDown(n); 
    event.preventDefault(); 
}); 

편집 : 사실, 심지어 * 슬라이더에 기능을 실제 일치하는 제어를 전달하는 방법을 알아 내기 위해 노력하지만 실제로 내가 아무 생각하는 방법 또는 그한다면이 없다 않는 것을 알고하지 않을 수 있습니다 작업.

Answer 4

코드가 작동하지 않는 이유는 루프 중에 n 변수가 계산되지 않기 때문입니다.

mousewheel 함수에 전달하는 루프에 익명 함수를 만들므로 익명 함수의 코드는 마우스 휠이 발생할 때까지 실행되지 않습니다. 그때까지 n 변수의 값은 10입니다. 또는 코드의 다른 곳에서 변수를 사용하는 경우에는 완전히 다른 것입니다. 대신 문자열의 기능을 만들기 위해 Function 함수를 사용

하면 코드에 n 변수의 현재 값을 주입 할 수있다 :이 있어야하지만

for(var n=0; n<10; n++) { 

    $('#content-scroll' + n).mousewheel(
     Function('event', 'delta', 
     'if (delta > 0) sliderUp(' + (n-1) + ');' + 
     'else if (delta < 0) sliderDown(' + (n-1) + ');' + 
     'return false; // prevent default' 
    ) 
    ); 

} 

(N-1) ? content-scroll0 요소의 마우스 휠 이벤트는 sliderup(-1)입니까?

Answer 5

SO (case in point)에서 많은 질문을받습니다. 당신은 폐쇄를 "함정"각 반복에서 n의 값이 필요합니다

for(var n=0;n<10;n++) 
{ 
    (function(n){ 
     $('#content-scroll'+n).mousewheel(function(event, delta) { 
      if (delta > 0) sliderUp(n-1); 
      else if (delta < 0) sliderDown(n-1); 
      return false; // prevent default 
     }); 
    })(n); 
} 

Answer 6

JQuery와 특별히 이벤트 데이터의 통과가 허용을하는 수도, 또는,이 경우 당신에게 유용 할 수 없습니다 :

for(var n=0;n<10;n++) 
{ 
    $('#content-scroll'+n).bind('mousewheel', {index:n}, function(event, delta) { 
    var innerN = event.data.index; 
    if (delta > 0) sliderUp(innerN-1); 
    else if (delta < 0) sliderDown(innerN-1); 
    return false; // prevent default 
    }); 
}