J'ai écrit une fonction très simple pour vérifier le nom de la classe de balise. Je l'ai attaché aux div (s) en utilisant .attr() et cela ne semble pas poser de problème d'alerter.

Cependant, $(this).attr('class') ne peut pas afficher le nom de classe correct et simplement afficher

"indéfinie"

. En fait, j'ai plus de choses à faire avec $(this), donc c'est vraiment dommage que je m'arrête au tout début.

Quelqu'un me dirait-il pourquoi cela s'est produit et comment y remédier?

<div class="testing class1" >Something here</div>
<div class="testing class2" >Something here</div>    
<script>

$("div.testing").attr('onclick', 'checkClass()');

function checkClass(){
  alert( $(this).attr('class'));
  // what do something more with "$(this)"
}
2
Tony Ho 26 nov. 2017 à 19:15

3 réponses

Meilleure réponse

Vous devez transmettre ceci à la fonction car $(this) = window;

Veuillez essayer ceci:

$("div.testing").attr('onclick', 'checkClass(this)');
function checkClass(e){
  alert( e.className);
  // what do something more with e, this is you clicked element
}
0
Shiladitya 27 nov. 2017 à 02:53

Bien que jQuery ait ses propres méthodes pour ajouter / supprimer des classes depuis / vers des éléments, pour l'énumération n'ont rien. Vous devez donc utiliser la méthode native js.

var checkClass = e => {
  alert(e.target.classList)
}

$("div.testing").click(checkClass)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testing class1" >Something here</div>
<div class="testing class2" >Something here</div>
0
26 nov. 2017 à 16:39

Essayez de l'implémenter de la manière suivante, votre code affichera une alerte interne undefined car this fait référence à checkClass() fonction et non à l'élément que vous essayez de cibler, voir la démo ci-dessous, vous devriez apprendre à créer un simple plugin

$.fn.checkClass = function() {
  $(this).on('click', function() {
    console.log($(this).attr('class'));
  });
}
$("div.testing").checkClass();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testing class1">Something here</div>
<div class="testing class2">Something here</div>
0
Muhammad Omer Aslam 26 nov. 2017 à 16:27
47498242