Jquery Selector
Bonjour à tous !
J'ai un petit probleme pour selectionner des elements du DOM , Je vous explique :
Grace au Jquery , je rajoute une "class" afin de réaliser une animation lorsqu'on "click" sur un element comme cela :
$(document).ready(function() {
$('button').on('click', function() {
$(this).toggleClass('is-button');
});
});Puis en css :
button {
width: 2.5%;
height: 2.5%;
background:white;
text-decoration: none;
border-radius: 50px;
background-color: white;
font-size: 100%;
transition-duration: 1s;
border: 2px solid #80D0D0;
outline: none;
}
button.is-button {
transition: 1s;
transform: translateY(30px) rotate(90deg);
}Ici cela se passe bien , j'arrive à faire ce que je veux , la ou ca deviens plus compliqué c'est lorsque je veux rajouter un bouton mais je ne veux pas qu'il est le meme comportement mais comme je selectionne dans le css et le js button tout les boutons de ma page auront ce comportement alors que je veux que un seul bouton ai ce comportement.
Par exemple ici , je fais un bouton "maison" :
<p class='button-social'><i class="fa fa-bars"></i></p>
<ul class="social-bar">
<li><a href=""><i class="fa fa-facebook" style="color: #80D0D0;"></i></a></li>
<li><a href=""><i class="fa fa-twitter" style="color: #80D0D0;"></i></a></li>
<li><a href=""><i class="fa fa-instagram" style="color: #80D0D0;"></i></a></li>
<li><a href="?"><i class="fa fa-linkedin" style="color: #80D0D0;"></i></a></li>
<li><a href=""><i class="fa fa-steam" style="color: #80D0D0;"></i></a></li>
<li><a href=""><i class="fa fa-spotify" style="color: #80D0D0;"></i></a></li>
</ul>
$(document).ready(function() {
$('.button-social').on('click', function() {
$('.social-bar').slideToggle(1000, 'swing');
$('???').classToggle('is-button1');
});
});Je ne sais pas quoi mettre comme selector ici , car des balises p il y en a plein dans ma page et je peux pas faire en css :
.social-bar {
display: none;
margin-left: 10%;
margin-top: 1%;
list-style-type: none;
}
p.button-social {
color: #80D0D0;
transition-duration: 0.5s;
}
p.button-social.is-button1 {
transform: rotate(180deg);
}Si vous avez une solution je suis preneur ;)
Merci d'avance,
10 réponses
Et si tu utilises une deuxième classe spécifique comme ceci
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<style>
.rouge.yesno {
color:red;
}
.vert.yesno {
color:green;
}
.bleu.yesno {
color:blue;
}
</style>
<script>
$(document).ready(function() {
$('h2').on('click', function() {
$(this).toggleClass('yesno');
});
});
</script>
</head>
<body>
<h2 class="rouge yesno">rouge</h2>
<h2 class="vert yesno">vert</h2>
<h2 class="bleu yesno">bleu</h2>
</body>
</html>Désolé , J'ai pas ete tres clair ;)
Je souhaite par exemple lorsque je click sur un element , qu'il fasse une animation , j'arrive à le faire avec les propriétés du css et js mais la ou je block c'est lorsque je dois ajouter une class en js et que l'element est deja selectionné/utiliser quelque part d'autre dans la page.
J'ai ca en HTML :
<button class="button-social"><i class="fa fa-bars"></i></button>
<ul class="social-bar">
<li><a href=""><i class="fa fa-facebook" style="color: #80D0D0;"></i></a></li>
<li><a href=""><i class="fa fa-twitter" style="color: #80D0D0;"></i></a></li>
<li><a href=""><i class="fa fa-instagram" style="color: #80D0D0;"></i></a></li>
<li><a href="?"><i class="fa fa-linkedin" style="color: #80D0D0;"></i></a></li>
<li><a href=""><i class="fa fa-steam" style="color: #80D0D0;"></i></a></li>
<li><a href=""><i class="fa fa-spotify" style="color: #80D0D0;"></i></a></li>
</ul>
Jquery : J'ai ici le probleme de quoi mettre en selector ou il y a les "???" Si je met "button" , cela va faire la meme animation que j'ai fais plus haut dans la page et si je attribue la class '.button-social' comment le modifier apres dans le css cela va faire '.button-social.is-button1' et ca ne marche pas.
$(document).ready(function() {
$('.button-social').on('click', function() {
$('.social-bar').slideToggle(1000, 'swing');
$('???').classToggle('is-button1');
});
});Je sais pas si j'ai bien expliqué ^^ dite moi ;)
J'ai cette animation plus haute avec d'autre boutton :
button {
width: 2.5%;
height: 2.5%;
background:white;
text-decoration: none;
border-radius: 50px;
background-color: white;
font-size: 100%;
transition-duration: 1s;
border: 2px solid #80D0D0;
outline: none;
}
button.is-button {
transition: 1s;
transform: translateY(30px) rotate(90deg);
}
$(document).ready(function() {
$('button').on('click', function() {
$(this).toggleClass('is-button');
});
});
Mais je veux que pour le prochain boutton il n'ai pas cette animation , comment je peux faire ?
$(document).ready(function() {
$('button').on('click', function() {
$(this).toggleClass('is-button');
});
});
Ce code ci dessus va se réaliser pour chaque fois que j'utilise la balise button , la question est comment je peux faire pour que chaque bouton est sa class specifique ?
Afin que chaque bouton est sa propre animation.
On y arrive au veritable prob ;)
Voila , j'ajoute la classe :
button.button1 {
width: 2.5%;
height: 2.5%;
background:white;
text-decoration: none;
border-radius: 50px;
background-color: white;
font-size: 100%;
transition-duration: 1s;
border: 2px solid #80D0D0;
outline: none;
}
button.button1.is-button {
transition: 1s;
transform: translateY(30px) rotate(90deg);
}
$(document).ready(function() {
$('.button1').on('click', function() {
$(this).toggleClass('is-button');
});
});Est ce que ce code marche avec "button.button1.is-button " ?
Déjà utilises les balises de code parce que là c'est dégueulasse. Et puis au lieu de demander, essaye ! ^^