함수 호출이 '클릭'이벤트 핸들러와 작동하지 않습니다.

click 이벤트 핸들러로 함수를 실행하는 데 문제가 있습니다. numberCheck() 함수를 제거하고 코드를 이벤트 핸들러에 직접 게시하면 잘 작동합니다. 여기에 뭔가 기본적인 것이 빠져 있니?함수 호출이 '클릭'이벤트 핸들러와 작동하지 않습니다.

jQuery(document).ready(function(){ 
var scopedVariable; 
var number = Math.floor(Math.random()*11); 
function numberCheck() { 
$(this).closest('#outsideContainer').find('.hotter').addClass('hideStuff'); 
$(this).closest('#outsideContainer').find('.colder').addClass('hideStuff'); 
var guess = $(this).closest('#guessContainer').find('.value').val(); 
    if(+guess === number) 
    { 
    $(this).closest('#outsideContainer').find('.gotIt').removeClass('hideStuff'); 
    } 
    else { 
     $(this).closest('#guessContainer').find('.value').val('Please guess again'); 
     if(Math.abs(guess - number) < Math.abs(scopedVariable - number)) { 
      $(this).closest('#outsideContainer').find('.hotter').removeClass('hideStuff'); 
      } 
     else if(Math.abs(guess - number) > Math.abs(scopedVariable - number)) { 
      $(this).closest('#outsideContainer').find('.colder').removeClass('hideStuff'); 
      } 
     scopedVariable = guess; 
     } 


} 

$('.query').on('click', function() { 

     numberCheck(); 
    }); 
});

여기에 필요한 경우 내 HTML이다 : 이것에 대한 어떤 도움이 많이 감사합니다

<body> 
    <div id="outsideContainer"> 
    <div id="guessContainer"> 
     <h3> Guess a number between 1 and 10 </h3> 

     <input id="txtfield" name="txtfield" type="text" class="value"/><br> 
     <input type = "submit" class="query" /> 

    </div> 
    <div id="guessShow"> 
     <p class="hotter hideStuff" > Getting Hotter!! </p> 
     <p class="colder hideStuff"> Getting Colder, BRRR!!! </p> 
     <p class="gotIt hideStuff"> Awesome! You have guessed the number </p> 
    </div> 
    </div> 
    </body>

여기 내 코드입니다.

출처

2013-06-07 Aditya Gorti

나는 새로운 함수 안에서'$ (this)'이 범위를 벗어난다. – Rick

프레임 워크를 사용할 때 프레임 워크를 언급하는 것을 잊지 마십시오. (correct) – Sebas

그래,'$ (this)'를 HTML의 실제 요소로 대체하거나 매개 변수로 전달하십시오. –

는

jQuery(document).ready(function(){ 
    var that = this; 
    // the rest of your code

로 코드를 수정하고 내부 함수의 내부 that 대신 this를 사용합니다.

출처

2013-06-07 14:58:11

과 같이, 함수 (numberCheck(this))에 this를 통과 시도하고 다른 함수 뭔가에 매개 변수의 이름을 지정하고 그 함수에 이름에 this의 인스턴스를 변경합니다

function numberCheck(submitButton) { 
    $(submitButton).closest('#outsideContainer').find('.hotter').addClass('hideStuff'); 
    [...] 
} 

$('.query').on('click', function() { 
    numberCheck(this); 
});

출처

2013-06-07 15:02:07 Billy

이것은 효과가 있습니다! $ (이)가 새로운 함수 안에서 범위를 벗어 났음을 나는 깨닫지 못했다. 알아 둘만한 –

을 대신을 실행 함수에서 이벤트 클릭에 대한 입력 매개 변수로 해당 함수를 전달하십시오. 이 방법에

$('.query').on('click',numberCheck);

, 당신은 입력 매개 변수로 콜백을 전달하고, 함수는 이벤트 클릭 해고 된 객체에 대한 액세스 권한을 얻을 수 있습니다.

출처

2013-06-07 15:10:22 Burimi

저는 this이 문제라고 생각합니다. 매개 변수로 사용해야합니다. 이 시도하십시오 (나는 .click() 대신 .on() 사용)

jQuery(document).ready(function(){ 
var scopedVariable; 
var number = Math.floor(Math.random()*11); 
function numberCheck($this) { 
    $this.closest('#outsideContainer').find('.hotter').addClass('hideStuff'); 
    $this.closest('#outsideContainer').find('.colder').addClass('hideStuff'); 
    var guess = $this.closest('#guessContainer').find('.value').val(); 
     if(+guess === number) 
     { 
     $this.closest('#outsideContainer').find('.gotIt').removeClass('hideStuff'); 
     } 
     else { 
      $this.closest('#guessContainer').find('.value').val('Please guess again'); 
      if(Math.abs(guess - number) < Math.abs(scopedVariable - number)) { 
       $this.closest('#outsideContainer').find('.hotter').removeClass('hideStuff'); 
       } 
      else if(Math.abs(guess - number) > Math.abs(scopedVariable - number)) { 
       $this.closest('#outsideContainer').find('.colder').removeClass('hideStuff'); 
       } 
      scopedVariable = guess; 
      } 


} 

$('.query').click(function() { 
    //console.log($(this).html()); 
    numberCheck($(this)); 
});

그리고 이것을 fiddle. 나는이 도움을 바랍니다.

출처

2013-06-07 16:06:17 Stiger

함수 호출이 '클릭'이벤트 핸들러와 작동하지 않습니다.

답변

관련 문제