Récupération d'un élément dans une classe pour le changer
Résolu
debalsjeremy
Messages postés
27
Statut
Membre
-
debalsjeremy Messages postés 27 Statut Membre -
debalsjeremy Messages postés 27 Statut Membre -
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
Voila merci, n'hésitez pas a me demander des précisions..
--
Web Developer - Toulouse (France) Actuellement en Licence RTAI (Responsable Technique d’Application Internet) UT1 Capitole.
Twitter : @debalsjeremy
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..
--
Web Developer - Toulouse (France) Actuellement en Licence RTAI (Responsable Technique d’Application Internet) UT1 Capitole.
Twitter : @debalsjeremy
A voir également:
- Récupération d'un élément dans une classe pour le changer
- Changer dns - Guide
- Comment récupérer un document dans le presse papier - Guide
- Changer l'extension d'un fichier - Guide
- Changer carte graphique - Guide
- Changer wifi chromecast - Guide
1 réponse
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 :
Bonne journée
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
27
Statut
Membre
1
Merci, c'est parfait !
