2010-04-30 14 views
7

Bis jetzt habe ich alle meine jquery Code direkt in der Funktion document.ready gelöscht. Ich denke, dass dies für bestimmte Situationen nicht der beste Weg ist.Führen Sie nur jquery Effekte/Operationen auf bestimmten Seiten

zum Beispiel: Wenn ich möchte, dass eine Animation ausgeführt wird, wenn eine bestimmte Seite lädt, was der beste Weg ist, um darüber zu gehen.

$(document).ready(function() { 
    $("#element_1").fadeIn(); 
    $("#element_2").delay('100').fadeIn(); 
    $("#element_3").delay('200').fadeIn(); 
}); 

Wenn dies direkt in der document.ready dann jedes Mal ANY Seite geladen, es wird jede Zeile überprüfen und für das Element suchen. Was ist der beste Weg, um jQuery zu sagen, nur ein Stück Code auf einer bestimmten Seite durchzuführen, um dieses Problem zu vermeiden.

Antwort

10

durch Prüfen, ob Elememt auf der Seite vorhanden sein, bevor Animation

if ($("#element-1").length) { 
    $("#element-1").fadeIn(); 
} 

ausführen und so weiter mit anderen Elementen #element_2 und #element_3


@numediaweb:

aktuelle jQuery is() Implementierung ist wie unter

is: function(selector) { 
    return !!selector && jQuery.filter(selector, this).length > 0; 
}, 

so kann es klüger sein is() zu verwenden, aber es ist schneller nur length zu bedienen und schneller sogar document.getElementById().length

+1

So Wiederholungen zu vermeiden, ich könnte nur eine eindeutige ID für jede Seite des Körpers Element haben und überprüfe, ob das existiert! – Galen

+0

ja du hast Recht! –

+0

Ein besserer Ansatz besteht darin, [ein Klassenattribut für Ihr body-Tag festzulegen] (http://stackoverflow.com/questions/9578348/best-way-to-execute-js-only-on-specific-page/9578898#9578898)) – numediaweb

0

nur den Code enthalten zu verklagen Sie wollen ausgeführt werden, wenn das DOM für das bereit ist, bestimmte Seite. $(document).ready(... bedeutet nicht, dass Sie auf jeder Seite den gleichen Codeabschnitt ausführen sollten. Dies würde erfordern, verschiedene Überprüfungen durchzuführen, um zu wissen, was ausgeführt werden muss.

Ich bin sicher, dass Sie einige allgemeine Funktionen haben, die Sie auf jeder Seite ausführen möchten, sowie einige seitenspezifische Funktionen. Wenn dies der Fall ist, könnten Sie die allgemeine Funktionalität in eine einzige Funktion einfügen und sie so von $(document).ready(... aufrufen, dass der einzige verbleibende Code für diese bestimmte Seite spezifisch ist. Zum Beispiel:

Ich bin nicht einverstanden mit der Durchführung verschiedener Prüfungen auf jeder einzelnen Seite, so dass der Code weiß, wo wir sind. Es scheint, umständlich und völlig vermeidbar, zum Beispiel:

function doAnimation() { 
    $("#element_1").fadeIn(); 
    $("#element_2").delay('100').fadeIn(); 
    $("#element_3").delay('200').fadeIn(); 
} 

$(document).ready(function() { 
    if(window.location.href == 'http://example.com/foo') { 
     doAnimation(); 
    } 
    if(this page has blah) { 
     doBlah(); 
    } 
}); 

Idealerweise, was es sollte sein ist:

$(document).ready(function() { 
    // do stuff for foo.php 
}); 
+0

schlagen Sie vor, unterschiedliche js-Dateien für jede Seite zu haben? – Galen

+0

@Galen - ja, etwas. Ich versuche, Sie dazu zu ermutigen, Code nur dort zu verwenden, wo er benötigt wird, anstatt Bedingungen einzugeben, um herauszufinden, ob er ausgeführt werden muss. – karim79

Verwandte Themen