web-dev-qa-db-fra.com

Javascript ne fonctionne pas?

Il y a 2 jours, javascript était situé correctement dans mon dossier de bas de page, jusqu'à ce que, soudainement, il ne fonctionne plus. J'étais paresseux pour faire la bonne façon de mettre en file d'attente, donc je l'ai officiellement fait pour voir si cela résoudrait le problème, mais ce ne fut pas le cas. Lorsque j'inspecte le code HTML, le javascript est chargé à l'intérieur, mais ne joue pas. Alors, j'ai pensé que c'était le script, et ensuite test a exécuté un script qui, je le sais, fonctionne bien avec tuts plus, encore une fois, rien.

Voici leur script, que je réorganise bien sûr pour correspondre à la présentation de mes dossiers. 

<?php 

function twentyfifteen_child_scripts() {
    wp_enqueue_script( 'transition js', get_stylesheet_directory_uri() . '/js/transition.js' );
}
add_action('wp_enqueue_scripts','twentyfifteen_child_scripts');

Et dans mon dossier transition.js, il y a ... 

alert("yo");

Vérification de la console sur chrome deux erreurs apparaissent:

(1)Echec du chargement de la ressource: le serveur a répondu avec un statut de 404 (non trouvé)

(2)Uncaught TypeError: $ n'est pas une fonction

Qui fait référence à ce script. 

 <script type="text/javascript">
        $(".menu-button").click(function () {
    $(this).parents(".wrapper").toggleClass("show-menu");
});
    </script>

Ce script fonctionne bien sur les bancs d'essai HTML.

Je suppose que le problème n'a rien à voir avec ce code, mais je pensais que cela aiderait. S'il vous plaît, si quelqu'un est familier ou a entendu parler d'une situation similaire, offrez-lui un conseil, sentez que je suis dans une impasse en ce moment. Merci.

javascriptwp-enqueue-script
2
OtherClare

Le "Échec du chargement de la ressource" est probablement une erreur et n'est pas lié à votre problème. Le fait qu'il génère une erreur à propos du raccourci $ signifie que votre fichier js est chargé correctement.

Le problème probable est que jQuery dans WordPress se charge en mode "noConflict" . En tant que tel, le raccourci $ ne fonctionnera pas par défaut. Essayez de remplacer votre script par ceci:

<script type="text/javascript">
    jQuery(".menu-button").click(function () {
        jQuery(this).parents(".wrapper").toggleClass("show-menu");
    });
</script>

Ou bien si vous aimez vraiment le raccourci $:

<script type="text/javascript">
    (function($) {
        $(".menu-button").click(function () {
            $(this).parents(".wrapper").toggleClass("show-menu");
        });
    })(jQuery);
</script>

Il existe également un problème de logique dans votre javascript. La ligne

$(this).parents(".wrapper").toggleClass("show-menu");

Ne fonctionnera pas comme prévu. jQuery.parents() renvoie un ensemble de résultats alors que jQuery.toggleClass() attend un seul élément. Si vous savez que l'élément situé directement au-dessus de show-menu sera toujours wrapper et qu'il s'agit du seul élément que vous souhaitez appliquer, vous pouvez simplement échanger cette ligne pour celle-ci.

$(this).parent(".wrapper").toggleClass("show-menu");

Sinon, si wrapper peut être une hauteur arbitraire supérieure à show-menu, vous aurez besoin de quelque chose comme ceci.

<script type="text/javascript">
    jQuery(".menu-button").click(function () {
        jQuery(this).parents(".wrapper").each(function(){
            jQuery(this).toggleClass("show-menu");
        });
    });
</script>

Incidemment, la raison pour laquelle vous obtenez cette erreur "Not Found" est parce que transitions.js n'existe pas à cette URL: https://generation-co.co/wp-content/themes/twentyfifteenG-CHILD/js/transition.js

2
TheGentleman