Javascript wird nicht funktionieren

Question

Ich fand diese Funktion für ein drupal Tutorial. Kann mir jemand erklären, warum das folgende Javascript in meiner Wordpress-Installation nicht funktioniert und mir vielleicht eine Lösung bietet?

; 
(function ($) { 
"use strict"; 
    var $corn = $('.corn-anchor'); 
    $corn.each(function(idx, el) { 
    var $el = $(el); 
    $el.once('corn-animation', function() { 
     $(window).on('load', function() { 
     new Waypoint({ 
      element: el, 
      handler: function(direction) { 
      $el.toggleClass('corn-animated', (direction == 'down')); 
      }, 
      offset: '85%' 
     }); 
     }); 
    }); 
    }); 
}); 

ich möchte es verwenden, um einige Kapitel-Wrapper zu wechseln, die Elemente innerhalb dieser Wrapper zu animieren, indem Sie CSS-Übergänge mit dem .corn animierten Selektor. Ich benutze das Wegpunkte-Plugin. Ich bekomme nicht einmal eine Fehlermeldung im Debugger, obwohl keine toggleClass hinzugefügt wird, wenn ich zu dem Element mit der Klasse Corn-Anchor scrolle.

Answer 1

Nichts führt jemals den Code in der Funktion. Betrachtet man es sollte die letzte Zeile

})(jQuery); 
// ^^^^^^^^---- *call* the function, passing in `jQuery` 

nicht

}); 

auch sein, stellen Sie sicher, dass von einem script-Tag am Ende des HTML geladen wird, kurz vor dem Schließen </body>-Tag (und nach dem script Tag, das jQuery enthält). Andernfalls wird es zu früh ausgeführt und keineElemente finden.

Wenn Sie nicht steuern, wo das Skript nach oben endet (da Sie Wordpress verwenden), statt die letzte Zeile zu ändern, ändern Sie die erste:

jQuery(function ($) { 

Die jQuery nennt, vorbei in dieser Funktion; jQuery ruft die Funktion später auf (indem sie sich selbst als erstes Argument übergibt), wenn der HTML-Code analysiert wurde und das DOM aufgefüllt ist. Es ist ein Alias ​​für ready.