Ich frage mich, ob es möglich ist, den folgenden Code prägnanter zu machen:
%Vor%Der Name des Landes bleibt für jeden gleich, wobei "Trigger" oder "Img" am Ende hinzugefügt wird. Es gibt hier eine Menge Wiederholungen, die darauf hindeuten, dass ich nicht den besten Weg gehe.
Ich hatte Gedanken herum:
Ist das möglich oder bin ich zu ausgefallen?
Edit 1: Vielen Dank für all die Antworten, Entschuldigung dafür, dass ich den HTML-Code nicht gepostet habe. Kurz gesagt, ich benutze Bildkarten über einem bg-Bild (der Erde), während der Schwebeflug auslöst, um meine absolut positionierten Schwebebilder ein- und auszublenden.
%Vor%Reigels Antwort scheint der Weg dorthin zu sein, krank auszuprobieren, Bericht zu erstatten, weitere Kommentare willkommen! :)
Da es so aussieht, als ob Sie nur auf unique ids zugreifen, verwenden Sie am besten ein lookup table IMO.
TROCKEN! alles fertig!
Eine andere effizientere Methode wäre die Verwendung von event delegation .
Wenn alle hover -Elemente die gleiche TAG haben, könnte dieser Ansatz nützlich sein:
Angenommen, alle Ihre Elemente " hoverable " wären DIV s. Sie sollten diesen Elementen immer noch ein classname geben, damit nur diese spezifischen Elemente angesprochen werden.
Es macht sehr viel Sinn, die root element für delegate() einzuschränken. Hier verwende ich document.body , was .live() tun würde. Das Tolle an .delegate() ist, dass wenn Ihre Hover-Elemente einen übergeordneten Knoten teilen, Sie delegate() auf diesem Knoten anwenden können. Auf diese Weise reduzieren Sie die Anzahl der gebundenen Ereignishandler
(2 statt 6).
lol, sieht so aus, als wäre er ungefähr gleich groß oder länger als dein Code, aber definitiv trockener.
Danke an @Andy für den Hinweis auf die Leistungseinbußen bei der vorherigen Version mit $(..).each .
Wenn Sie den HTML-Code ändern können, würde ich das gesamte Wissen in die Seite selbst codieren und jQuery verwenden, um Hover-Ereignisse einzurichten.
%Vor%Javascript
%Vor%Oder, um die Dinge viel einfacher zu machen, fügen Sie zu jedem der Bilder eine Markierungsklasse hinzu, die 'fadingImage' genannt wird, und verwenden Sie dann diesen Code ...
%Vor%Dies funktioniert, weil alle Bilder, unabhängig von ihrer ID, auf die gleiche Weise behandelt werden. Sie müssen nur herausfinden, auf welchen Bildern auf Ihrer Seite die Hover-Handler angehängt werden müssen, und dies geschieht mit die Markierungsklasse Sie können vielleicht sogar auf die IDs verzichten, wenn sie für nichts anderes verwendet werden.
Aktualisierung: Nein, dass ich aufgewacht bin (Danke jAndy und Reigel!), Ich werde meinen Beitrag ergänzen, um mit der Tatsache umzugehen, dass das Element, das schwebt, nicht das ist, das verblasst wird.
Ohne ein Beispiel-Markup zu haben, muss ich einige Annahmen machen, aber das ursprüngliche Poster möchte vielleicht das echte Markup bereitstellen, um die Dinge in einen Zusammenhang zu stellen.
%Vor%Abhängig von der Markup-Struktur muss die Methode zum Auffinden von fadingImage, die mit dem fadingTrigger verknüpft ist, variieren, aber durch eine gut definierte Struktur sollte sie zuverlässig sein.
Der Grund, warum ich diese Methode gegenüber einem Array von IDs zum Nachschlagen der Elemente bevorzugen würde, ist, dass jedes Hinzufügen des Markups Änderungen am Javascript erfordern würde - das wäre besonders problematisch, wenn das Markup dynamisch generiert wird. Das Javascript könnte auch dynamisch generiert werden, um das entsprechende Array von Werten aufzunehmen, aber das würde den DRY-Principle verletzen.
Tags und Links jquery jquery-selectors