Impossible de récupérer l'attribut avec jQuery

Question

J'ai la fonction de clic suivante.

$(".charPortait").on("click", function(event){ 
    console.log(this.value); 
}); 

Le journal indique "non défini". Pour savoir pourquoi il ne peut pas être obtenir la valeur, j'ai essayé cette prochaine:

$(".charPortait").on("click", function(event){ 
    console.log(this); 
}); 

cette consigne:

<div id="TomiasPortrait" class="col charPortait" value="Tomias"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
    do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</div> 

Je ne comprends pas pourquoi je ne reçois pas l'attribut « valeur » à Connectez-vous correctement.

Answer 1

$(".charPortait").on("click", function(event){ 
 
    console.log($(this).attr("value")); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="TomiasPortrait" class="col charPortait" value="Tomias"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
 
    do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 
</div>

Answer 2

1. Div n'a pas de valeur.
2. Utilisez data-*
3. Obtenez la valeur à l'aide .attr(data-*)

$(".charPortait").on("click", function(event){ 
 
    console.log($(this).attr('data-value')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="TomiasPortrait" class="col charPortait" data-value="Tomias"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
 
    do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 
</div>

Answer 3

Vous pouvez utiliser l'attribut de données pour obtenir la valeur. s'il vous plaît vérifier ci-dessous exemple travaillera pour vous.

<div id="TomiasPortrait" class="col charPortait" data-value="Tomias"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
    do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</div> 

$(document).ready(function() { 
    $(".charPortait").on("click", function(){ 
    console.log(this.getAttribute('data-value')); 
}); 
}); 

Answer 4

Le journal indique "non défini". car cela indique qu'une variable n'a pas été affectée de valeur.

Vous devez donc utiliser attr() pour obtenir la valeur de cet attribut. Dans votre HTML, il n'y a pas d'attribut value de sorte que vous pouvez utiliser data- puis concaténer votre nom de données. Voir ci-dessous.

$(".charPortait").on("click", function(){ 
 
    console.log($(this).attr('data-value')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="TomiasPortrait" class="col charPortait" data-value="Tomias"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
 
    do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 
</div>

Answer 5

Ici, vous allez avec une solution

$(".charPortait").on("click", function(event){ 
 
    console.log($(this).attr('value')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="TomiasPortrait" class="col charPortait" value="Tomias"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
 
    do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 
</div>

Espérons que cela vous aidera.