jQuery Schleife bzw. Array für folgende Funktion

29.12.2011 21:50 Uhr

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

2 Antworten

#1

30.12.2011 07:43 Uhr

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 );
});

#2

30.12.2011 19:12 Uhr

@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

Ähnliche Fragen



Datenschutzerklärung · Impressum