toggleClass ne fonctionne pas

AFO Conseil
Javascript

Bonjour,

voilà ce que j'ai dans mon php

<head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/responsive.js"></script>
        ...
  <body>
  <a href="#" class="header_icon" id="header_icon"></a>

voilà ce que j'ai dans mon responsive.js

(function($){
    alert('toto');
    $('#header_icon').click(function(e){
        alert('test');
        e.preventDefault();
        $('body').toggleClass('with-sidebar');
    });
})(jQuery);

Le toto s'affiche mais après plus rien !!!
Je ne comprends pas pourquoi ?

J'aimerai tout simplement rajouter une class de mon fichier css ou l'enlever....

7 réponses

Pandazaur

Bonjour,

Tu souhaites créer l'évènement au clic sur l'élement ?

Essaye quelque chose comme ça pour voir si ça marche:

$('#header_icon').on('click', function(){
        $('body').toggleClass('with-sidebar');
    });
AFO Conseil
Auteur

pour reformuler quand je clic sur un <a href> je souhaite rajouter une class sur mon body et ainsi moduler ma feuille de style.
le code dans la video : menu-hamburger-responsive
Ne fonctionne pas chez moi.
du coup je cherche des solution

Amilor7

Salut,

C'est simplement une question de chargement de DOM, je m'explique la façon dont tu déclares jQuery et aussi le fait que la balise "script" soit dans le header, va savoir, jQuery n'attend pas que le DOM soit chargé, donc le JS s'éxécute notamment l'alerte, mais si tu insère le code suivant sans rien changer après ton alerte :

console.log($('#header_icon'));

Tu verra que tu n'aura aucun selector / object renvoyé par jQuery, il ne le (l'élément) trouve pas.

Bref maintenant la solution : 

$(function(){
    console.log($('#header_icon'));
    $('#header_icon').click(function(e){
        alert('tot')
        e.preventDefault();
        $('body').toggleClass('with-sidebar');
    });
})

Comme tu peux le voir la déclaration de jQuery est différente, et là il sait ce qu'est $('#header_icon').

Exemple

Bonne soirée !

Huggy

Si ça ne marche toujours pas, essaye de charger ton handler sur le document.ready

$(document).ready( function() {
   $('#header_icon').click(function(e){
        alert('groovy !!!')
        e.preventDefault();
        $('body').toggleClass('with-sidebar');
    });
})
AFO Conseil
Auteur

dans mon php j'ai :

        <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
        <script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/responsive.js"></script>
    </head>
    <body>
    <a href="#" class="header_icon" id="header_icon"></a>

dans mon js j'ai :

$(function(){
    console.log($('#header_icon'));
    $('#header_icon').click(function(e){
        e.preventDefault();
        alert('groovy !!!');
        $('body').toggleClass('with-sidebar');
        alert('ok');
    });
});

groovy s'affiche mais pas ok !!! :(
du coup
ce que j'ai dans mon css n'est pas pris en compte

.with-sidebar{
    background-color: #fff;
}

Allez j'essaie solution bis

$(document).ready( function() {
   $('#header_icon').click(function(e){
        e.preventDefault();
        alert('groovy !!!');
        $('body').toggleClass('with-sidebar');
        alert('ok');
    });
});

ça marche pas non plus
pourtant l'exemple de Amilor7 fonction sur le net

Huggy

charge ton script responsive.js en fin de body
car j'ai l'impression que jquery est chargé mais le DOM ne l'est pas encore
ou utilise la méthode document.ready

AFO Conseil
Auteur

Bon je ne sais pas si je dois abandonné l'idée mais je viens de reprendre les fichiers d'Amilor7 pour les mettre sur mon serveur local et ça marche pas.