L'effet toggleClass en jQuery

L’effet toggleClass en jQuery

Dans ce cours tuto, on va voir comment appliquer une couleur à des éléments par un simple clic sur un bouton. L’effet toggleclass permet un aller retour entre deux états d’un élément. Au clic, on rajoute une classe, au deuxième clic, on revient à l’état initial.

Voici l’exemple:

See the Pen change color toggleclass by yuyazz (@yuyazz) on CodePen.

Ici je construis un carré rempli de carré, dans le style d’un rubycube. Au niveau du html, ce sont juste des cases vides. L’effet pourrait être appliqué bien sûr à n’importe quel élément. Voici le code html et jquery :

<!doctype html>
<!--[if lte IE 7]> <html class="ie67 ie678" lang="fr"> <![endif]-->
<!--[if IE 8]> <html class="ie8 ie678" lang="fr"> <![endif]-->
<!--[if IE 9]> <html class="ie9" lang="fr"> <![endif]-->
<!--[if gt IE 9]><!--> <html lang="fr"> <!--<![endif]-->
    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
        <link rel="stylesheet" href="style.css" media="all">
          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    </head>
    <body>
   <!--------------------------------CARRE DE COULEUR------------------------------------>
CARRE DE COULEUR
<br/><br/>
        <table>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <button>CHANGE LA COULEUR</button>
    </body>
</html>

Ensuite, au chargement de la page, au clic sur notre bouton, on applique à nos cases une classe particulière grâce à la fonction toggleClass.

     $(document).ready(function() {
               $('button').click(function() {
                   
     
                $('tr').toggleClass('jaune');
                $('tr:odd').toggleClass('vert'); $('td:last').toggleClass('black');
                });
            });
            $('button').off("click");

Et voici les valeurs css de nos classes :

td{
    border:1px solid black;
    width:60px;
    height:60px;    
}

.jaune{
    background-color:yellow;
}

.vert{
   background-color:green;
  
}
.black{
   background-color:black;
  
}

27/03/2014 Mis à jour le 19/12/2018 Par Copier coller | Dans jQuery