"ceci" ne fonctionne pas comme prévu

Question

Cela fait maintenant une heure que je me bats avec ça, et je ne peux pas le résoudre. Je suis nouveau à utiliser this sur javascript, mais c'est vraiment simple, et ça ne marche pas.

Voici le HTML

<ul class="nav pull-right nav-tabs" id="primarynav"> 
    <li class=" navlink"> 
     <a href="#">About</a> 
    </li> 
    <li class="navlink active"> 
     <a href="#">Portfolio</a> 
    </li> 
    <li class="navlink"> 
     <a href="#">Contact</a> 
    </li> 
</ul> 

Et les js

$(document).ready(function(){ 
    $(".navlink").click(function(){ 
     $(".navlink").removeClass("active"); 
     this.addClass("active"); 
    }); 
}); 

Il devrait de supprimer la classe active de tous les éléments avec la classe navlink, puis ajoutez la classe active à l'élément cliquée. Mais ce n'est pas le cas.

http://jsfiddle.net/Tckf7/

Answer 1

Modifier à:

$(this).addClass("active"); 

jsFiddle example

.addClass() est une méthode jQuery et vous aviez essayé de l'appliquer à un objet non jQuery (this vs $(this)).

Answer 2

this n'est pas un objet jQuery, utilisez $(this) à la place.

Answer 3

addClass() est une méthode jQuery mais this est juste la référence directe à l'objet DOM. Vous devez d'abord ajouter this à un objet jQuery avant de pouvoir utiliser une méthode jQuery.

$(document).ready(function(){ 
    $(".navlink").click(function(){ 
     $(".navlink").removeClass("active"); 
     $(this).addClass("active"); 
    }); 
}); 

---

DEMO - À l'aide $(this).addClass() au lieu de this.addClass()

---

Modifier

Pour élaborer un peu sur ce point. Vous ne pouvez jamais appeler la méthode addClass() de jQuery sur un objet JavaScript car addClass() est une méthode jQuery.

Pour faire la même chose en JavaScript pur, si vous voulez simplement utiliser this, vous pouvez utiliser element.className, semblable à ceci:

$(document).ready(function(){ 
    $(".navlink").click(function(){  
     $(".navlink").removeClass("active"); 

     //$(this).addClass("active"); 
     this.className += " active"; 
    }); 
}); 

---

DEMO - En utilisant this.className exemple

---

Cependant, si vous utilisez déjà jQuery, il serait peu logique de ne pas utiliser $(this).addClass() à la place.

Answer 4

Vous devez utiliser $ (ce)

$(document).ready(function(){ 
    $(".navlink").click(function(){ 
     $(".navlink").removeClass("active"); 
     $(this).addClass("active"); 
    }); 
}); 

http://jsfiddle.net/Tckf7/2/

Answer 5

this fait référence au DOMElement auquel jQuery a attaché l'événement. Pour le transformer en une collection jQuery et être en mesure d'utiliser des méthodes jQuery comme addClass, passer comme argument à $:

$(this).addClass("active"); 

fonctions à l'intérieur, le mot-clé this se réfère en fait au contexte de la fonction. Dans le cas des gestionnaires d'événements, le contexte est le DOMElement auquel le gestionnaire est attaché.