11499 sujets

JavaScript, DOM et API Web HTML5

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

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..
Bonjour,

$('.cercle:eq(' + elementSelect + ')').css('background-color','blue');
devrait fonctionner.
Bonjour,
debalsjeremy a écrit :
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.

... Et c'est fort bien !

La version "full" jQuery de loicbcn :
$('.cercle').eq(elementSelect).css('background-color','blue');


Mais pour moi, il faut que tu fasse directement référence à ton cercle avec $(this) :
$('.cercle').click(function(){
  $(this).css('background-color','blue');
})


NB : je ne sais pas trop à quoi sert les liens autour des cercles, mais si c'est juste pour avoir le curseur, autant ne pas les utiliser, et préférer le CSS.
Modifié par SolidSnake (29 Dec 2015 - 13:47)
Merci à vous deux pour vos réponses,

Vos réponses semble toute les deux fonctionner j'ai utiliser au final la solution de SolidSnake. Et non la balise <a></a> ne me sert pas a mettre un curseur, mais affiché quelques chose en fonction du clic mais je pense que je vais les enlever et simplement faire des divs que je cacherais et j'afficherais.

Encore merci a vous deux !
Sujet clos
Aller à