Changer couleur css

Par Nakor404, il y a 13 ans

Javascript

Bonnjour

Je souhaite faire un texte qui change de couleurs vert ou rouge suivant que l'on clique dessus. Le texte doit aussi changer.
Par exemple :

le texte == "désactiver" est rouge par défaut, je clique dessus il devient vert et il est maintenant écris "activer".
Je re clique dessus il redevient rouge et il est re-ecris "désactivé".

J'ai déjà ca mais je sais pas comment mettre en place la couleur rouge.

<div id="co">
  <a href="#" id="coucou">Désactiver</a>
</div>

<script type="text/javascript">
$(function() {

        $('#coucou').on('click', function() {
                $(this).css("color","green");
                $(this).text("activer");
                return false;
        });

});
</script>

7 réponses

coloo, il y a 13 ans

Salut;

<html> 
<head> 
<style>
#coucou {color:red;}
</style>
<script language="JavaScript"> 
 var i =0;
function change() 
{ 
if (i==0){
document.getElementById('coucou').innerHTML = 'Activer'; 
document.getElementById('coucou').style.color = 'green'; 
i=1;
}
else{
document.getElementById('coucou').innerHTML = 'Désactiver'; 
document.getElementById('coucou').style.color ='red'; 
i=0;
}
}

</script> 
</head> 
<body> 

<div id="co">

  <a href="#" id="coucou" onClick="change()">Désactiver</a>

</div>

</body> 
</html>

T'étais un peu loin, Bonne continuation.

Nakor404, il y a 13 ans

Ah pas mal ^^ J''ai essayer avec if else, mais j'ai pas du tout pensé aussi simple avec l'utilisation d'une variable i.

Merci :)

Maenhyr, il y a 13 ans

Le mieux pour du long terme serait de faire un changement de classe. Par défaut tu as ça :

<div id="co">

  <a href="#" id="coucou" class="red">Désactiver</a>

</div>
<script type="text/javascript">

jQuery(function($) {

        $('#coucou').on('click', function() {
                var $elem = $(this);
                if($(this).hasClass('red')
                    $elem.removeClass('red').addClass('green');
                else 
                    $elem.removeClass('green').addClass('red');
                return false;
        });

});

</script>

Pourquoi c'est mieux ? Cela permet de décorréler la partie style (CSS) de la partie animation (JS). Cela permet d'avoir une classe pour plusieurs éléments qui peuvent être sur la même page ou sur différentes pages. Ta couleur se retrouve ainsi à un seul endroit, dans ton fichier CSS, c'est le seul endroit ou elle devrait être.

coloo, il y a 13 ans

Tu as oublié le changement de texte mais le principe y est et c'est toujours un plaisir de voir un code plus opti que le mien =)(coloo bidouilleur pro =) )

Si tu as 5 min nakor, il vaut mieux que tu utilises l'esquisse de prbaron.

Nakor404, il y a 13 ans

Oui, merci pour les explications !
Pour le changement de texte ca doit donner un truc comme ca non ? (la je peux pas tester)

if($(this).text('désactiver')
    $(this).text("activer");
Maenhyr, il y a 13 ans

J'aurais fait ça :

<div id="co">
  <a href="#" class="btn red" data-text-on="Activer" data-text-off="Désactiver">Désactiver</a>
</div>
<div id="co2">
    <a href="#" class="btn red" data-text-on="Bonjour" data-text-off="Au revoir">Au revoir</a>
</div>
<script type="text/javascript">
jQuery(function($) {
    $('.btn').on('click', function(e) {
        var $elem = $(this);

        if($elem.hasClass('red')) {
            $elem.removeClass('red').addClass('green');
            $elem.text($elem.attr('data-text-on'));
        }
        else {
            $elem.removeClass('green').addClass('red');
            $elem.text($elem.attr('data-text-off'));
        }
        e.preventDefault();
    });    
}); 
</script>

Et le fiddle d'exemple : http://jsfiddle.net/prbaron/QYst4/1/.

@Coloo, merci pour la précision, c'est pas une bonne idée d'aider les gens un vendredi soir, je suis pas efficace :).

@Nakor404 : J'ai mis des attributs au lien plutôt que directement le texte dans le JS pour avoir plus de flexibilité. Ton JS devient réutilisable pour d'autres éléments. De la même manière un e.preventDefault() est plus approprié qu'un return false.

Le return false effectue un preventDefault() qui permet de bloquer l'action par défaut de l'élément (ici de rediriger vers le lien indiqué), ainsi qu'un stopPropagation(), qui permet de supprimer la propagation de l'évènement click à des éléments parents dans le DOM. Cela peut être néfaste pour du code futur.

Nakor404, il y a 13 ans

Ah Jsfiddle <3

Merci pour ces précision :) data-text-on= Je connaissais pas du tout ! Merci :)