2012-12-08 7 views
2

내 코드에서 이전 질문에서 다음 두 줄을 사용하고 있습니다.

$(this).removeClass('page larger').addClass('current'); 
$(this).siblings().removeClass('current').addClass('page larger'); 

성공하지 못한 곳이라면 어디서든 사용할 수 있습니다. 그러나 내가 성공 안에 그들을 배치하면 : 그들은 일하지 않을 것이다. 나는 그들이 성공할 때만 일할 필요가있다. 이 문제를 어떻게 해결할 수 있습니까?

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>PHP, jQuery search demo</title> 
<style type="text/css"> 
.current{ 
padding:5px; 
border:1px solid #000000; 
background-color:white; 
cursor:pointer; 
} 
.page{ 
padding:5px; 
border:1px solid #000000; 
background-color:red; 
cursor:pointer; 
} 
</style> 

<script type="text/javascript" src="http://localhost/jQuery1.8.3.js"></script> 
<script type="text/javascript"> 
$(function() { 

    $('.page').live('click', function() { 

     var menus =($(this).attr("menus")); 
     var data   = menus; 

     if(data) { 

     //alert (data); 
     // // ajax call 
      $.ajax({ 
       type: "GET", 
       url: "pages.php", 
       data: data, 
       dataType: "json", 
       cache: false, 
      beforeSend: function(html) { 

        $(".pageLoading").html("Fetching new posts..."); 

       }, 
       success: function(page_data){ 
        $(".posts").empty(); 
        $(".pageLoading").empty(); 
        $(".posts").html(page_data['articles']); 
        console.log (page_data['articles']); 

           $(this).removeClass('page larger').addClass('current'); 
           $(this).siblings().removeClass('current').addClass('page larger'); 

       }, 

      });  
     } 
     return false; 
    }); 
    ///////////////////////////////////////////////////////////////////////// 

}); 
</script> 

</head> 
<body> 
    <div class="posts">These are the existing posts</div> 
    <br /> 
     <div class="navigation clearfix"> 
      <div class="menusHolder"> 
        <span menus="in/consumer/p22" class="current">1</span> 
        <span menus="in/consumer/p19" class="page larger">2</span> 
        <span menus="in/consumer/p15" class="page larger">3</span> 
        <span menus="in/consumer/p10" class="page larger">4</span> 
      </div> 
     </div> 
     <br /> 
     <div class="pageLoading"></div> 
</body> 
</html> 
+0

의미를 함수 내부에서 (당신이 무엇을 의미하는지부터) : 다음과 같이

는 단순히 Ajax 호출에에 추가 할 수 있습니다. '$'내의 selector를 명시 적으로 언급하십시오 – mshsayem

답변

3

this의 범위가 변경되었습니다. 원래 요소에 대한 참조를 유지하려는 경우, click 범위에서 변수를 생성하고 success 핸들러가 폐쇄에 포함됩니다

$(function() { 

    $('.page').live('click', function() { 

     var menus =($(this).attr("menus")); 
     var data   = menus; 
     var $that = $(this); // <- add this 

     if(data) { 

     //alert (data); 
     // // ajax call 
      $.ajax({ 
       type: "GET", 
       url: "pages.php", 
       data: data, 
       dataType: "json", 
       cache: false, 
      beforeSend: function(html) { 

        $(".pageLoading").html("Fetching new posts..."); 

       }, 
       success: function(page_data){ 
        $(".posts").empty(); 
        $(".pageLoading").empty(); 
        $(".posts").html(page_data['articles']); 
        console.log (page_data['articles']); 

        // change $(this) to $that. success handler is a closure that will include $that 
        $that.removeClass('page larger').addClass('current'); 
        $that.siblings().removeClass('current').addClass('page larger'); 

       }, 

      });  
     } 
     return false; 
    }); 
    ///////////////////////////////////////////////////////////////////////// 

}); 
+0

이것으로 생각하겠습니다. – Norman

3

사용,

$('.page').live('click', function() { 
    var $that = $(this); 
    // use that 
}); 

을 아약스 범위에서, 이것은 ajax 객체를 참조한다.

3

here과 같이 컨텍스트 옵션이 트릭을 수행합니다. this`이 다른`의

$.ajax({ 
    type: "GET", 
    context: this, 
    url: "pages.php", 
    data: data, 
    ... 
    success: function() { 
     $(this).removeClass('page larger').addClass('current'); 
     $(this).siblings().removeClass('current').addClass('page larger'); 
    } 
}); 
+0

좋은 것들. 한 번만 변경하면됩니다. – Norman

관련 문제