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

Résolu/Fermé

debalsjeremy Messages postés 24 Date d'inscription vendredi 25 décembre 2015 Statut Membre Dernière intervention 16 janvier 2016 - 29 déc. 2015 à 12:21
debalsjeremy Messages postés 24 Date d'inscription vendredi 25 décembre 2015 Statut Membre Dernière intervention 16 janvier 2016 - 29 déc. 2015 à 21:16

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:

Récupération d'un élément dans une classe pour le changer
Changer dns - Guide
Piratage facebook changer mot de passe - Guide
Changer clavier qwerty en azerty - Guide
Comment récupérer un compte facebook piraté - Guide
Comment recuperer un message supprimé sur whatsapp - Guide

1 réponse

Réponse 1 / 1

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
29 déc. 2015 à 14:02

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

debalsjeremy Messages postés 24 Date d'inscription vendredi 25 décembre 2015 Statut Membre Dernière intervention 16 janvier 2016 1
29 déc. 2015 à 21:16

Merci, c'est parfait !

Discussions similaires

Comment "inspecter l'élément" sur Mac ?

macOs High Sierra : « Le serveur de récupération n’a pas pu être contacté »

Mail étrange (demande de reinitialisation MDP)

Discussions similaires

Newsletters