Boucle pour changer coloration d'un DIV
DextroyMax
Messages postés
793
Date d'inscription
Statut
Membre
Dernière intervention
-
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
Bonjour, bonsoir,
Je souhaite faire une boucle pour qu'a chaque clique sur mon div, je change le background-color de ce dernier...
<style>
#cercle
{
width: 200px;
height: 200px;
background-color: red;
border-radius: 100px;
}
</style>
<body>
<div id="cercle" onclick="alert('toto')">
<script type="text/javascript">
function change(cercle) {
var tab = ['red', 'blue', 'green']
}
</script>
</div>
Pour le moment, j'ai ce code... Un peu en bordel qui marche pas, normal.
Je me demande alors comment peux-t-on faire pour a chaque fois changer ce qu'on donne a background color dans mon #cercle a chaque clique sur mon div, en mettant les couleurs dans mon tableau...
Cordialement :).
--
Tolsadus, ou Dextrøy.
Google est ton ami, le moteur de recherche CCM aussi.
Je souhaite faire une boucle pour qu'a chaque clique sur mon div, je change le background-color de ce dernier...
<style>
#cercle
{
width: 200px;
height: 200px;
background-color: red;
border-radius: 100px;
}
</style>
<body>
<div id="cercle" onclick="alert('toto')">
<script type="text/javascript">
function change(cercle) {
var tab = ['red', 'blue', 'green']
}
</script>
</div>
Pour le moment, j'ai ce code... Un peu en bordel qui marche pas, normal.
Je me demande alors comment peux-t-on faire pour a chaque fois changer ce qu'on donne a background color dans mon #cercle a chaque clique sur mon div, en mettant les couleurs dans mon tableau...
Cordialement :).
--
Tolsadus, ou Dextrøy.
Google est ton ami, le moteur de recherche CCM aussi.
1 réponse
-
en jquery ce serait plus simple avec hasClass addClass et removeCass et des if
tu crée des class avec tes background-color uniquement (.red .blue .green)
tu retire le background-color de #cercle
le html
<div id="cercle" class="red">
ne pas oublier d'intégrer jquery dans <head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
juste apres <body>
<script>
$(document).ready(function(){
$("#cercle").click(function(){
if ( $(this).hasClass('red') )
{$(this).addClass('blue').removeClass('red');}
else if ( $(this).hasClass('blue') )
{ $(this).addClass('green').removeClass('blue');}
else if ( $(this).hasClass('green') )
{ $(this).addClass('red').removeClass('green');}
else { $(this).addClass('red')}
});
})
</script>
voila
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.-
un peu plus simple avec effet
ne pas oublier d'intégrer jquery + jquery UI dans <head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
apres <body>
<script>
$(document).ready(function(){
$("#cercle").click(function(){
if ( $(this).hasClass('red') ) {$( this ).switchClass( "red", "blue", 1000 );}
else if ( $(this).hasClass('blue') ) {$( this ).switchClass( "blue", "green", 1000 );}
else if ( $(this).hasClass('green') ) {$( this ).switchClass( "green", "red", 1000 );}
});
})
</script>
-
