Ich mache ein sehr einfaches Popup, in dem ich aus 8 Arten von Inhalten auswählen kann, die alle dasselbe Format verwenden. Es funktioniert, indem Sie auf versteckte div klicken, die beim Schweben im oberen Bereich angezeigt werden. Wie Sie sehen, habe ich natürlich einen sehr langen und großen Code für etwas gefunden, das wahrscheinlich mit viel weniger Schrauben und Drähten ausgeführt werden kann .

Da es sich um viele Zeilen handelt, habe ich dies alles in jsFiddle eingefügt

Gibt es eine Möglichkeit, dies leichter zu machen?

Gelöst ... Ja!

Vielen Dank an alle ... hier ist das endgültige Skript: jsFiddle Final für den Fall, dass jemand anderes die gleichen Schwierigkeiten hat

1
Samuel Ramzan 8 Okt. 2012 im 18:55

3 Antworten

Beste Antwort

Ich sehe drei Dinge, die Sie tun könnten, um weniger Code zu erhalten:

  • Verwenden Sie die Hover-Verknüpfung
  • Verwenden Sie anonyme Funktionen
  • Verwenden Sie eine parametrisierte Funktion

Erstens verfügt jQuery über die hover Methode, um das Mouseover- / Mouseout-Verhalten zu ersetzen:

$('#scrollbtnR8').bind('mouseover', R8);
$('#scrollbtnR8').bind('mouseout', R8b);

Kann ersetzt werden als

$('#scrollbtnR8').hover(R8, R8b);

Das ist allerdings nur ein bisschen weniger Code :)


Zweitens definieren Sie jetzt eine Funktion für jeden Eventhandler, verwenden diese Funktionen jedoch nur einmal. Wenn Sie sie nur einmal verwenden, können Sie anonyme Funktionen wie folgt erstellen:

$('#scrollbtnR1').bind('click', esta1);

Wird

$('#scrollbtnR1').click(function() { 
    $("#scrollcontrol").animate({"left":-240},500, "swing", null);
});

Schließlich können Sie eine Funktion verwenden, um die allgemeinen Teile des Codes zu kapseln und die sich ändernden Teile als Parameter zu übergeben.

Sie könnten es so implementieren:

<div id="scrollcontrol" animate="swing" swingLeft="-240">

$('div[animate='swing']').click(function() { 
    $(this).animate({"left": $(this).attr("swingLeft")}, 500, "swing", null);
});

Der Selektor "div" verwendet den Attribut gleich Selektor. Sie können auch allen "animierten" Divs eine Klasse zuweisen und sie mit der Klassenauswahl auswählen: $("div.animate"), mit der alle <div class="animate"> ausgewählt werden.

Was hier passiert ist:

  • Wählen Sie alle Divs aus, die den Wert 'Swing' für das Animationsattribut haben.
  • Rufen Sie jQuery Swing Animate auf, ABER verwenden Sie $(this).attr("swingLeft") als linke Eigenschaft.

attr("wingLeft") ruft den Wert für die SwingLeft-Eigenschaft ab, wie in Ihrem HTML-Markup definiert.

Ich habe an dieser Stelle aufgehört, Ihren Code zu betrachten. Der Schlüssel lautet: Sehen Sie sich den auszuführenden Code an und prüfen Sie, ob Sie ein Muster bemerken, das Sie verallgemeinern können. Sie könnten dann vielleicht den Code weiter vereinfachen.
Ebenfalls erwähnenswert: Einige Leute mögen es nicht, Eigenschaften wie "animieren", "SwingLeft" usw. zum HTML hinzuzufügen. Update Gemäß dem Kommentar von pimvdb können Sie die jQuery-Daten verwenden, um sei ein bisschen "sauberer".

Der Code könnte dann so aussehen:

<div id="scrollcontrol" class="swing" data-swingLeft="-240">

$('.swing').click(function() { 
    $(this).animate({"left": $(this).data("swingLeft")}, 500, "swing", null);
});
1
Laoujin 8 Okt. 2012 im 17:02

Hören Sie zunächst auf, alles mit IDs zu referenzieren. Verwenden Sie Klassen wie diese:

$('.scrollbtn').hover(function(){
         $(this).css("opacity","0")
             .animate({"opacity":1},500, "linear");
    }, function() {
        $(this).css("opacity","1")
             .animate({"opacity":0},500, "linear");
    });
1
Jezen Thomas 8 Okt. 2012 im 15:13

Refaktorieren Sie das gesamte wiederholte Verhalten in eine Funktion und übergeben Sie dann die verschiedenen Teile als Parameter, z. Dies:

function esta1(event) {
    $("#scrollcontrol").animate({"left":-240},500, "swing", null);
}
function esta2(event) {
    $("#scrollcontrol").animate({"left":0},500, "swing", null);
}
...
$('#scrollbtnR1').bind('click', esta1);
$('#scrollbtnL2').bind('click', esta2);

Wird dies:

function functionName(event, left) {
    $("#scrollcontrol").animate({"left": left},500, "swing", null);
}
$('#scrollbtnR1').bind('click', function (e) {
    functionName(e, -240);
});
$('#scrollbtnL2').bind('click', function (e) {
    functionName(e, 0);
});

Setzen Sie diesen Refactoring-Prozess fort, bis Sie nur noch eine einzige generische Funktion haben und alles andere Parameter an diese Funktion übergibt.

Wenn Ihre Parameterliste lang und unkompliziert wird, sollten Sie stattdessen ein Parameterobjekt übergeben:

function functionName(event, params) {
    $("#scrollcontrol").animate({"left": params.left}, 
        params.duration, 
        params.animation, null);
}
$('#scrollbtnR1').bind('click', function (e) {
    functionName(e, { left: -240, duration: 500, animation: "swing" });
});
1
jbabey 8 Okt. 2012 im 15:13