jQuery Schleife bzw. Array für folgende Funktion Frage jQuery Schleife bzw. Array für folgende Funktion zu Favoriten hinzufügen

Daumen hoch 0 Daumen runter

Hallo zusammen,

ich möchte folgende Funktion automatisch erstellen lassen, anstatt sie sechsmal zu schreiben. Dabei soll der aktuelle "ajaxloadlink" die Klasse "current_state" und die anderen fünf jeweils "normal_state" bekommen. Desweiteren muss immer die Variable "filetwo" bis "filesix" eingefügt werden ("fileone" gibt es nicht, es ist der ursprüngliche Content). Die Funktion sieht demnach so aus:

$("#ajaxloadlink2").click(function(e){
e.preventDefault();
$("#ajaxloadlink1,#ajaxloadlink3, #ajaxloadlink4, #ajaxloadlink5, #ajaxloadlink6").css(normal_state);
$("#ajaxloadlink2").css(current_state);
$().ausblenden();
$(".plus_content_add").load("führ_mich_zu_den_Dokumenten" + filetwo + ".html");
$(".plus_content_add").fadeIn(400);

});

Kann mir jemand auf die Sprünge helfen?

Danke, Henry

Antworten


Diese Antwort als GUT bewerten 1 Diese Antwort als SCHLECHT bewerten

Zu deinem Skript fallen mir AdHoc 2 Dinge ein:

1) solltest du versuchen die Selektoren etwas mehr einzuschränken, um mehr Performance zu gewinnen.

 $("#ajaxloadlink2")

ist ein schlechter Selektor da die Javascript Engine bei der Ausführung jedes Element im DOM auf die ID ajaxloadlink2 testen muss. Wenn du z.B. weißt, das nur Link Element diese ID tragen können, wäre es sinnvoll dies auch so zu definieren:

$("a#ajaxloadlink2")

2) Die Lösung für dein Problem:

var files = new Array();
files["ajaxloadlink2"] = 'A';
files["ajaxloadlink3"] = 'B';
files["ajaxloadlink4"] = 'C';
files["ajaxloadlink5"] = 'D';
// Alle a Elemente die eine ID haben die mit "ajaxloadlink" beginnt
$('a[id^="ajaxloadlink"]').click( function( e ) {
    e.preventDefault();
    // Alle a Elemente die eine ID haben die mit "ajaxloadlink" beginnt, aber NICHT die ID des aktuellen Elements.
    $('a[id^="ajaxloadlink"]').not('a[id="' + $(this).attr( 'id' ) + '"]').each( function() {
        $(this).css( normal_state );
    });
    $(this).css( current_state );
    $().ausblenden();
    $(".plus_content_add").load( "führ_mich_zu_den_Dokumenten" + files[$(this).attr( 'id' )] + ".html" );
    $(".plus_content_add").fadeIn( 400 );
});

Toller Hinweis zur Performance!

martin am 30.12.2011

Der Performance-Tipp ist grob fahrlässig. Der ID-Selektor ist der schnellste.

challer am 30.12.2011
Diese Antwort als GUT bewerten 0 Diese Antwort als SCHLECHT bewerten

@torsten: Wow, danke! Das funzt super!

Wenn ich die letzten beiden Zeilen zusammenfasse:

$(".plus_content_add").load( "führ_mich_zu_den_Dokumenten" + plus_files[$(this).attr( 'id' )] + ".html" ).fadeIn( 400 );

Dann habe ich wieder eine Zeile gespart. Wird die Chain dann auch eins nach dem anderen oder parallel ausgeführt?

@challer: Kannst Du das begründen? Rein intuitiv würde ich auch denken, dass eine unique ID besser gefunden wird als die Referenz über den a-Tag...

Grüße, Henry

Ich vermute es wird NICHT nacheinander ausgeführt. Das ergibt sich aus dem Asynchron in AJAX. Allerdings gibt es die Möglichkeit den Request synchron auszuführen (async: false).

Lies mal hier in der Doku:

http://api.jquery.com/jQuery.ajax/

Bitte beachte allerdings die Nebenwirkungen: z.B. das der Browser während des Requests komplett blockiert ist, und nicht nichts machen kannst.

thorsten am 30.12.2011

Deine Antwort

Registrierter User Bereits registriert? Bitte logge dich vor dem Antworten ein.

Deine Daten