faisant référence à cette fonction à l'intérieur

Question

Vu le code (beaucoup de celui-ci dépouillé)

// A data set 
$.DataArea = function() { 

    // Default options 
    $.extend(this, { 
     'class': "DataSet", 
     'bars': new Array(), 
     'container': null, 
     'containerId': null, 
     'gridsize': 20, 
     'width': 400, 
     'height': 400, 
     'currentSelectedBar': 0 
    }); 

    // Add a bar to this object 
    this.addBar = function(startDate, endDate, label, styleID) { 

     // When the bar is clicked 
     $('#' + barID).click(function() { 

      alert($(this).currentSelectedBar); 
      if (this.currentSelectedBar != undefined) 
       $('#' + this.currentSelectedBar).fadeIn("slow"); 

      this.currentSelectedBar = barID; 
       $('#' + barID).fadeTo("slow", 0.5); 

     }); 
    } 

Quand je alert($(this).currentSelectedBar); il sort toujours comme indéfini, ce n'est pas définir la valeur correctement. Des idées pour lesquelles cela pourrait être? L'idée est lorsque vous cliquez sur une barre, qu'elle disparaît, et lorsque vous cliquez sur une autre barre, la dernière barre à disparaître disparaît également.

Answer 1

En supposant que vous appelez addBar sur une instance de DataArea, votre code devrait être:

// Add a bar to this object 
this.addBar = function(startDate, endDate, label, styleID) { 
    var self = this; 
    // When the bar is clicked 
    $('#' + barID).click(function() { 

     alert(self.currentSelectedBar); 
     if (self.currentSelectedBar != undefined) 
      $('#' + self.currentSelectedBar).fadeIn("slow"); 

     self.currentSelectedBar = this.id; 
     $(this).fadeTo("slow", 0.5); 
    }); 
} 

intérieur du gestionnaire click, this se référera à l'élément DOM '#' + barID. Mais les propriétés sont affectées à un autre élément et non à cet élément DOM.

Answer 2

Le this dans votre fonction de rappel fait référence à l'élément qui déclenche l'événement: dans ce cas $('#' + barID). Je suppose que vous voulez accéder au this que vous avez étendu. Dans ce cas, vous devriez écrire quelque chose comme ça:

this.addBar = function(startDate, endDate, label, styleID) { 
    var self = this 

    // When the bar is clicked 
    $('#' + barID).click(function() { 

     alert($(self).currentSelectedBar); 
     if (self.currentSelectedBar != undefined) 
      $('#' + self.currentSelectedBar).fadeIn("slow"); 

     self.currentSelectedBar = barID; 
     $(this).fadeTo("slow", 0.5); 

    }); 
} 

Answer 3

var that = this; 
    $('#' + barID).click(function() { 

     alert(that.currentSelectedBar); 
     if (that.currentSelectedBar != undefined) 
      $('#' + this.currentSelectedBar).fadeIn("slow"); 

     that.currentSelectedBar = barID; 
      $('#' + barID).fadeTo("slow", 0.5); 

    }); 

Cache la valeur de this en dehors de la fonction de clic. à l'intérieur de la fonction de clic, le contexte this est le noeud DOM sur lequel vous avez cliqué.

Answer 4

Il semble que vous rencontrez un problème avec le comportement de jQuery.

$('#' + barID).click(function() { remappe la définition de this, mais ayant tenté d'ajouter des attributs à elle aura préalablement aucun effet parce que la définition de this a été écrasé.

Comme mentionné par recmashak vous pouvez mettre le this d'origine dans une variable puis l'utiliser lorsque vous faites votre alerte