Pourquoi mon jQuery a-t-il une erreur lorsque je mets cette ligne?

Question

Pourquoi mon jQuery a-t-il une erreur lorsque je mets cette ligne?

<script type="text/javascript"> 
     $(function(){ 
      $(".arrowbutton").click(function(){ 
       id = $(this).attr('rel'); 
       $.ajax({ 
       type:"POST", 
       url:"/upvote", 
       data:{'id':id}, 
       beforeSend:function() { 
       }, 
       success:function(html){ 
        $(this).hide(); 
       } 
       }); 
       return false; 
       }); 

      }); 
    </script> 

Lorsque je supprime $(this).hide();, ça va. Mais, je veux qu'il se cache !!!

Answer 1

Parce que this ne se réfère pas vous le bouton fléché, mais il fait référence à l'objet requête AJAX.

$(".arrowbutton").click(function(){ 
    var that = this; 
    var id = $(this).attr('rel'); 
    $.ajax({ 
    type:"POST", 
    url:"/upvote", 
    data:{'id':id}, 
    beforeSend:function() { 

    }, 
    success:function(html){ 
     $(that).hide(); 
    } 
    }); 

    return false; 
}); 

jQuery appelle votre fonction success plus ou moins comme ceci:

handleSuccess: function(s, xhr, status, data) { 
    // If a local callback was specified, fire it and pass it the data 
    if (s.success) { 
    s.success.call(s.context, data, status, xhr); 
    } 

    // Fire the global callback 
    if (s.global) { 
    jQuery.triggerGlobal(s, "ajaxSuccess", [xhr, s]); 
    } 
}, 

Le premier argument de la méthode d'appel définit le mot-clé this dans la fonction succès s.context

Answer 2

Parce que $(this) ne renvoie pas ce que vous pensez qu'il fait dans le rappel de succès. Vous pouvez utiliser une fermeture:

$(function(){ 
    $('.arrowbutton').click(function(){ 
     var button = $(this); 
     $.ajax({ 
      type: 'POST', 
      url: '/upvote', 
      data: { id: this.rel }, 
      beforeSend:function() { 
      }, 
      success:function(html) { 
       button.hide(); 
      } 
     }); 
     return false; 
    }); 
}); 

Answer 3

$(this) fait référence à la demande Ajax, pas le bouton environnant.

Essayez d'utiliser une fermeture comme ceci:

<script type="text/javascript"> 
    $(function(){ 
     $(".arrowbutton").click(function(){ 
      var arrowbutton = $(this); 
      id = $(this).attr('rel'); 
      $.ajax({ 
      type:"POST", 
      url:"/upvote", 
      data:{'id':id}, 
      beforeSend:function() { 
      }, 
      success:function(html){ 
       arrowbutton.hide(); 
      } 
      }); 
      return false; 
      }); 

     }); 
</script> 

Answer 4

« ce » fait signifie cela dans toutes les situations, parce que vous êtes dans une nouvelle fonction qui est la nouvelle.

Vérifiez ce tutoriel à apprendre toutes les différentes façons dont vous pouvez y faire face:

• http://justin.harmonize.fm/index.php/2009/09/an-introduction-to-javascripts-this/