Récupération d'un élément dans une classe pour le changer

Résolu
debalsjeremy Messages postés 24 Date d'inscription   Statut Membre Dernière intervention   -  
debalsjeremy Messages postés 24 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je veut tout simplement changer le css quand je clique sur un des cercle. Les cercles ont donc la même classe. Je sais que je pourrais affecter un id a chaque cercle mais j'aimerais faire ça plus propre.

J'ai donc récupérer dans une variable en jQuery le numéro du cercle cliqué.

Le seul problème c'est que je n'arrive pas ensuite a insérer cette valeur dans un nth-child(mavariable)..

Je vous montre un screen et mon code :

http://hpics.li/1fbfe4b 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Debals Jeremy - Portfolio</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
  
    
    <div id="line">
        <a href="#"><div class="cercle"></div></a>
        <a href="#"><div class="cercle"></div></a>
        <a href="#"><div class="cercle"></div></a>
        <a href="#"><div class="cercle"></div></a>
    </div>
   
    <script src="custom.js"></script>
</body>
</html>






#line {
    width: 800px;
    height: 5px;
    background-color: rgb(255, 120, 120);
    margin: auto;
    margin-top: 30%;
}

.cercle {
    width: 20px;
    height: 20px;
    background-color: rgb(255, 120, 120);
    border-radius: 50%;
    display: inline-block;
    margin-left: 136px;
    margin-top: -100px;
}







$(document).ready(function() {
    
    
$('.cercle').click(function(){
    
    var elementSelect = $('.cercle').index(this); //renvoie le numero de l'element de la classe .cercle
    
    $('.cercle:nth-of-type(elementSelect)').css('background-color','blue'); //Marche pas
    
    
    
});
    

})


Voila merci, n'hésitez pas a me demander des précisions..
A voir également:

1 réponse

Réponse 1 / 1
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
Salut,

Pour faire plus simple, tu peux utiliser le mot clé this pour cibler l'élément cliqué dans ta fonction de callback. Par exemple : 
$(function($) {
    $('.cercle').click(function() {
        $(this).css('background-color','blue');
    });
});


Bonne journée
2
debalsjeremy Messages postés 24 Date d'inscription   Statut Membre Dernière intervention   1
 
Merci, c'est parfait !
0

Discussions similaires

Code source couleur de fond
Mehdi-Amg -
Techno01 -

9 réponses